我快疯了。

我有以下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示例的源代码,在那里的任何地方都看不到任何启动工具提示的东西。所以我猜它应该可以工作,还是我错过了一些重要的东西?

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

谢谢你的帮助!


当前回答

如果使用Rails+Haml更容易包含工具提示,请执行以下操作:

= link_to '', some_path(), :class => "btn btn-success btn-mini icon-plane", :rel => "tooltip", :title => "Referential Guide"

这就是在元素的末尾添加下面的行。

:rel => "tooltip", :title => "Referential Guide"

其他回答

如果你正在用javascript创建包含工具提示的html,然后将其插入到文档中,你必须在插入html到文档后激活弹出窗口/工具提示,而不是在文档加载时…

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代码。

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

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

添加data-toggle="tooltip"在你想要的任何元素的工具提示。

Bootstrap 5.2 (2022)

有人想实现新的引导工具提示吗

步骤1

包括js

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

步骤2

包括这个脚本

$(document).ready(function(){
    $('[data-bs-toggle="tooltip"]').tooltip()
})

为什么? 因为文档这么说:https://getbootstrap.com/docs/5.2/components/tooltips/#overview

由于性能原因,工具提示是可选择的,因此必须自己初始化它们。

步骤3

在代码中包含data-b -toggle="tooltip"。

<a href="#" data-bs-toggle="tooltip" title="A nice tooltip">test</a>