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好自模态,并且popovers工作在整个网站都很好.

我错过了什么？

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"的元素,因此您无需在传入的对象中指定选择器.

对于一个工作,没有风格,演示检查这个小提琴

另外,要进一步指定,在定义像这样的工具提示时,像以前一样添加选择器很有用:

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