jquery - 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'
      });

据我所知，导入 bootstrap 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'
});