Bootstrap 3 工具提示或弹出框不起作用答案

【问题标题】：Bootstrap 3 Tooltips or Popovers doesn't workBootstrap 3 工具提示或弹出框不起作用
【发布时间】：2013-08-26 23:32:12
【问题描述】：

我有一个 Django 应用程序，其前端是在 Twitter Bootstrap 3 中设计的。我所有的样式和 JS 都可以正常工作，包括模态等等……但我终生无法获得弹出框的工具提示做任何事....

我没有在 Firebug 中抛出任何错误。

这是我包含的顺序：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="{{ STATIC_URL }}js/bootstrap.min.js"></script>

这是我直接从引导站点获取的工具提示的示例调用：

<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>

还有其他人对这两个元素有疑问吗？

我相当肯定这是我做过的蠢事。

Bootstrap 3 中提供的所有其他 JS 影响，如模式和选项卡都工作正常...

【问题讨论】：

不应该有data-title 属性，而不仅仅是title？
直接从引导站点复制了示例。将其切换到 data-title 但仍然没有发生任何事情...作为旁注，我还删除了所有其他 JS，以防出现某种奇怪的冲突，但这也无济于事。
在某处看起来像一个错误：jsfiddle.net/knownasilya/LhzwF/1 另请参阅我对@steakchasers 答案的评论。

标签： twitter-bootstrap tooltip twitter-bootstrap-3

【解决方案1】：

您只需要通过 javascript 启用工具提示：

$('some id or class that you add to the above a tag').tooltip()

【讨论】：

谢谢，我知道这很愚蠢... =)
你不应该这样做，因为数据 api 是他们的第一类 api，而 javascript 是次要的。见here。
当我添加了一段 JS 后它开始工作了，我还以为不需要它，但似乎绝对不是这样？
来自他们的文档：“出于性能原因，选择加入 Tooltip 和 Popover data-apis。如果您想使用它们，只需指定一个选择器选项。”

【解决方案2】：

工具提示必须用 jQuery 初始化：

<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>

<script>
$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

查看link

【讨论】：

【解决方案3】：

选择加入功能出于性能原因，Tooltip 和 Popover data-apis 是可选的，这意味着您必须自己初始化它们。

初始化页面上所有弹出框的一种方法是通过它们的 data-toggle 属性来选择它们：

    $(function () {
  $('[data-toggle="popover"]').popover()
})

【讨论】：