我快疯了。

我有以下HTML:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

引导样式的工具提示拒绝显示,只是一个普通的工具提示。

我有bootstrap。css工作得很好,我可以看到里面的类

我已经在我的HTML文件的末尾得到了所有相关的JS文件:

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

我已经查看了Bootstrap示例的源代码,在那里的任何地方都看不到任何启动工具提示的东西。所以我猜它应该可以工作,还是我错过了一些重要的东西?

我有模态和警报和其他东西工作得很好,所以我不是一个完全的白痴;)

谢谢你的帮助!


当前回答

If you do $("[rel='tooltip']").tooltip(); as other answers have suggested then you will activate tooltips only on elements that are currently there in DOM. That means if you are going to change DOM and insert dynamic content later it won't work. Also this is much less efficient because it installs event handler for individual elements as opposed to using JQuery event delegation. So the best way I've found to activate Bootstrap tooltips is this one line of code that you can place in document ready and forget about it:

$(document.body).tooltip({ selector: "[title]" });

注意,我使用title作为选择器,而不是rel=title或data-title。这有一个优点,它可以应用于许多其他元素(rel应该只适用于锚),而且它也可以作为旧浏览器的“备用”。

还要注意,如果你使用上述代码,你不需要data-toggle="tooltip"属性。

引导工具提示的开销很大,因为您需要处理每个元素上的鼠标事件。这就是为什么默认情况下他们没有启用它的原因。因此,如果你决定在上面一行注释,你的页面仍然可以工作,如果你使用标题属性。

如果你可以不使用title属性,那么我建议使用纯CSS解决方案,如Hint.css或检查http://csstooltip.com,这根本不需要任何JavaScript代码。

其他回答

您需要完成以下操作。添加

<script type="text/javascript">
    $(function () {
        $("[rel='tooltip']").tooltip();
    });
</script>

在页面的某处编写代码(最好是在<head>部分)。

还可以添加data-toggle: "tooltip"到任何你想启用它的地方。

我已经在头部添加了jquery和bootstrap-tooltip.js。在脚注中添加此代码对我有用!但是当我在标题中添加相同的代码时,它不起作用!

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>

在我的特殊情况下,它没有工作,因为我包含了两个版本的jQuery。一个用于引导,另一个(另一个版本)用于谷歌图表。

当我移除图表的jQuery加载时,它工作得很好。

从工具提示上的引导文档

由于性能原因,工具提示是可选择的,因此必须自己初始化它们。 初始化页面上所有工具提示的一种方法是根据它们的数据-选择它们 切换属性:

  $('[data-toggle="tooltip"]').tooltip()

我只是补充了一句:

<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

在bootstrap.min.js下面,它可以工作。