引导工具提示显示为常规 HTML 工具提示答案

【问题标题】：Bootstrap Tooltips showing like Regular HTML Tooltips引导工具提示显示为常规 HTML 工具提示
【发布时间】：2013-05-07 21:38:31
【问题描述】：

我已经尝试了所有方法，弹出窗口显示效果很好，但工具提示只是像常规 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 很好，因为模态框和弹出框在整个网站上都很好用。

我错过了什么？

【问题讨论】：

【解决方案1】：

你的标签应该是这样的：

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

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

【讨论】：

【解决方案2】：

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

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

或者..

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

【讨论】：

【解决方案3】：

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

对于一个工作的、无样式的演示 check out this Fiddle

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

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

【讨论】：