jquery - 引导工具提示显示为常规 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 很好，因为模态和弹出框在整个网站上都很好用。

我错过了什么？

score 6 · Accepted Answer

选择器的双重定义似乎抛弃了 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属性设置为“工具提示”的元素，因此您无需在传入的对象中指定选择器。

对于一个工作的、无样式的演示，请查看这个 Fiddle

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

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

score 0 · Accepted Answer

确保当文档像这样准备好时完成工具提示初始化..

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

或者..

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

score 0 · Accepted Answer

你的标签应该是这样的：

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

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

3 回答 3