无法让 Bootstrap 工具提示在行级别分配了 Popover 的列上工作答案

【问题标题】：Can't get Bootstrap ToolTip working on column which has Popover assigned at row level无法让 Bootstrap 工具提示在行级别分配了 Popover 的列上工作
【发布时间】：2013-05-12 11:58:24
【问题描述】：

我正在使用 DataTables 来显示数据，并且在每一行上，我都添加了一些数据，这样每当用户将鼠标悬停在特定行上时，他就会得到一个带有额外数据的 popover，例如

<tr id="123" class="Search odd" data-title="Profile data" data-content=" <p> <label>Test Popover</label> </p>" data-original-title="" title=""> </tr>

每当用户悬停一行时，他会得到 Popover 并带有 Test Popover 作为文本，现在我正在向它添加几列，就像

<td class=" sorting_1">Name</td> <td class="">somedate</td> <td class=""> <img title="Test tooltip" rel="tooltip" src="/img/paid_small.png"> </td>

我的页面上的 javascript 准备好了

$('.Search').live('hover', function (e) { $('.Search').popover({ 'trigger': 'hover', 'placement': 'right', 'container': 'body', 'html': true }); });

$('[rel=tooltip]').tooltip({ 'placement': 'bottom', 'container': 'body' });

如您所见，我为popover 和Tooltip 添加了javascript，但由于某种原因Tooltip css 不起作用，我有点像Tooltip（带有我的数据的浅灰色工具提示）而不是Bootstrap黑色背景之一。我尝试在页面的其他位置创建带有ToolTip 的虚拟链接，但它不起作用。

在这种特殊情况下，Popover 似乎覆盖了ToolTip，或者我试图同时显示Popover（行级别）和ToolTip（列级别），这可能会导致问题.

知道为什么会发生这种情况吗？

任何帮助将不胜感激。

谢谢。

【问题讨论】：

标签： css twitter-bootstrap tooltip popover

【解决方案1】：

修复：我在 Search --> Hover 事件下添加 Tooltip javascript，最终 Javascript 看起来像

$('.Search').live('hover', function (e) { $('.Search').popover({ 'trigger': 'hover', 'placement': 'right', 'container': 'body', 'html': true }); $('[rel=tooltip]').tooltip({ 'placement': 'bottom', 'container': 'body' }); });

抱歉，无法弄清楚如何正确缩进 javascript。

【讨论】：