css - 无法让 Bootstrap ToolTip 在行级别分配了 Popover 的列上工作

Question

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

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

每当用户悬停一行时，他会得到 Popover将 Test Popover 作为文本，现在我向其中添加几列，例如

<td class=" sorting_1">Name</td><br/>
<td class="">somedate</td><br/>
<td class=""><br/>
<img title="Test tooltip" rel="tooltip" src="/img/paid_small.png"><br/>
</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 添加了 javascript和 Tooltip但出于某种原因Tooltip css 不起作用，我有点像 Windows Tooltip (带有我的数据的浅灰色工具提示)而不是 Bootstrap黑色背景一。我尝试使用 ToolTip 创建虚拟链接页面中的其他地方，它不起作用。

看起来像Popover正在覆盖 ToolTip在这种特殊情况下，或者我可能正在尝试显示 Popover (在行级别)和 ToolTip (列级别)同时出现，这可能会导致问题。

知道为什么会这样吗？

我们将不胜感激。

谢谢。

Answer 1

固定:我添加Tooltip Search --> Hover 下的 javascript事件，最终的 Javascript 看起来像

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

抱歉不知道如何正确缩进 javascript。