Bootstrap工具提示显示为常规HTML工具提示

Question

我已经尝试了所有的方法，弹出窗口显示得很棒，但是工具提示就像普通的HTML工具提示一样。

​

这就是我的代码中的内容

HTML

    <th rel="tooltip" title="Number of calls made to our API">Api Call</th>

Javascript

  //Tooltips
      $('[rel=tooltip]').tooltip({
      'selector': '[rel=tooltip]',
      'placement': 'top'
      });

据我所知，我导入的引导css和js很好，因为模态和弹出窗口在整个网站上都很好。

我遗漏了什么？

Answer 1

选择器的双重定义似乎正在抛弃Bootstrap的工具提示。如果从传递给.tooltip()的对象中删除'selector': '[rel=tooltip]',，应该可以修复它。

然后，您的标记将如下所示：

<th rel="tooltip" title="Number of calls made to our API">Api Call</th>

你的JavaScript看起来会像这样：

//Tooltips
$('[rel=tooltip]').tooltip({
  'placement': 'top'
});

因为已经选择了rel属性设置为"tooltip“的元素，所以不需要在传入的对象中指定选择器。

对于工作的、未设置样式的演示check out this Fiddle

此外，为了进一步说明，在像这样定义工具提示时，像以前一样添加选择器是很有用的：

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

Answer 2

你的标签应该是这样的：

<th rel="tooltip" data-toggle="tooltip" title="Number of calls made to our API">Api Call</th>

您忘记添加data-toggle="tooltip"部件。

Answer 3

确保在文档准备就绪时完成工具提示初始化，如下所示。

$(function () {
   $("[rel='tooltip']").tooltip({placement:'top'});
});

或者..。

$(document).ready(function () {
   $("[rel='tooltip']").tooltip({placement:'top'});
});