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的工具提示。如果您从传递给'selector': '[rel=tooltip]',的对象中删除了.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'});
});