Bootstrap工具提示不起作用。

Question

Bootstrap工具提示不起作用。

286

我快疯了。

我有以下HTML：

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

Bootstrap的样式提示框无法显示，只是一个普通的提示框。

我已经成功应用了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示例的源代码，但没有找到任何启动工具提示的东西。所以我猜它应该可以正常工作，或者我在这里漏掉了什么重要的东西吗？

我的模态框、警告框和其他东西都可以正常工作，所以我不是一个彻底白痴 ;)

谢谢任何帮助！

- Mike Bartlett

2

提示工具在Twitter示例中的application.js文件中被初始化。你能发布你的HTML吗？我想看看你是如何初始化脚本的。 - Andres Ilich

2

啊啊啊....我忽略了第一条评论。那么这个代码应该可以工作：code<a href="#" rel="tooltip" title="A nice tooltip" class="tooltip-test">test</a><br> <script> // 工具提示演示 $('.tooltip-test').tooltip() </script> - Mike Bartlett

1

不要忘记将选择器传递给工具提示选项，$('.tooltip-test').tooltip({ selector: "a" })。 - Andres Ilich

3

没有选择器选项，提示框对我不起作用。这里是我放的演示：http://jsfiddle.net/VXctp/，试着不使用选择器。 - Andres Ilich

1

如果这段代码对你没用，确保在<head>标签中先引入 Popper，再引入 Bootstrap。 - Justin

显示剩余2条评论

26个回答

265

在遇到同样的问题后，我发现这个解决方案可以在不添加Bootstrap所需属性之外的其他标签属性的情况下起作用。

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

- ImaJedi4ever

22

谢谢！这对我有用。不知怎么的，这页上的其他解决方案对我都没有用。 - Roman

1

我和Roman在一起。这个解决方案也适用于bootswatch css变体。 - DaveCS

这对我起作用了。除此之外，没有其他东西能让它活过来，直到我尝试了这个。谢谢！ - Blake Petersen

1

这对我也起作用了。不知道为什么 $('[data-toggle="tooltip"]').tooltip({'placement': 'top'}); 不起作用？ - ZeroCool

1

谢谢，看起来这取决于您的组件放置在哪里。在我的情况下，当它只是在主容器中时，它的工作方式就像在Bootstrap文档中一样，但是当我将它放入Bootstrap树中时，它停止工作了。这个解决方案解决了我的问题。 - robson

显示剩余5条评论

33

您不需要单独加载所有的JS文件。

如果您要使用所有的Bootstrap功能，只需使用以下文件即可：

-bootstrap.css
-bootstrap.js

两者都可以在http://twitter.github.com找到。
最新版本的jquery.js

对于Glyphicons，您需要图片glyphicons-halfings.png和/或glyphicons-halfings-white.png（白色图像）
您需要将其上传到您网站的/img/文件夹中（或者）存储在任何地方，但更改bootstrap.css中的文件夹目录。

对于工具提示，您需要在<head> </head>标签中添加以下脚本

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

就是这样了...

- Harish Kumar

29

http://getbootstrap.com/javascript/#tooltips-usage

为了提高性能，提示框和弹出框的API是选择性启用的，这意味着

您必须自己初始化它们。

初始化页面上所有工具提示的一种方式是通过选择它们的data-toggle属性：

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

将这段代码放入您的HTML中，即可使用工具提示。

示例：

<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

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

- Max O.

2

谢谢分享这个选择加入的概念！从来没有在任何教程中看到过。 - kazinix

我所有的jQuery/Bootstrap提示问题的解决方案 - DJ Burb

提供的链接丢失了：请查看 https://getbootstrap.com/docs/4.1/components/tooltips/。 - Guillaume Husta

24

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

jQuery

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

这个对我有效。

- Ihor Shvydok

2

这个提议对我也完美地起作用了。我喜欢它，因为它简单而优雅。它让你像使用Dropdown和Tab元素一样继续使用Bootstrap标准，就好像插件默认初始化一样。我将@Igor提出的JS添加到一个新文件中，并将其bundled到原始的bootstrap.js中。 - Iago Rodríguez

20

我知道这是一个老问题，但是由于我在使用新版本的Bootstrap时遇到了这个问题，并且官网上并不清楚，所以在这里告诉你如何启用工具提示。

给你的元素添加类名"tooltip-test"

然后在你的javascript标签中激活这个类：

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>

- Amir Soleymani

这是唯一对我有效的解决方案。我正在使用data-original-title="{{someAngularJSVar}}"来更新标题，它运行得非常顺畅。 - WKara

19

如果您按照其他答案所建议的执行$("[rel='tooltip']").tooltip();，则只会在当前DOM中存在的元素上激活工具提示。这意味着，如果您将要更改DOM并稍后插入动态内容，则不会起作用。此外，这种方法效率较低，因为它为单个元素安装事件处理程序，而不是使用JQuery事件委托。因此，我发现激活Bootstrap工具提示的最佳方法是在文档准备就绪时放置一行代码，并忘记它：

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

请注意，我使用的是选择器title而不是rel=title或data-title。这样做有一个优点，它可以应用于许多其他元素（rel应该仅用于锚）并且它也作为旧浏览器的"回退"工作。

还要注意，如果您使用上面的代码，则不需要data-toggle="tooltip"属性。

Bootstrap工具提示很昂贵，因为您需要处理每个元素上的鼠标事件。这就是为什么他们没有默认启用它的原因。因此，如果您决定注释掉上面的行，则如果您使用title属性，您的页面仍将正常工作。

如果您不使用title属性，则建议使用纯CSS解决方案，例如Hint.css或检查http://csstooltip.com，它根本不需要任何JavaScript代码。

- Shital Shah

我在这个问题上挣扎，因为动态生成涉及到多个级别。href值是动态生成的内容，并且生成的div id基于与href值匹配的项目编号。因此，如果我有一个项目类型A的链接页面，那么我有一个a-1项目列表、a-2项目列表、a-3项目列表，每个链接都指向项目的单独页面，但我想要提示框内容在悬停时显示动态内容，以便用户在点击完整链接之前可以了解该项目的一些信息。 - Melanie Sumner

这是最有帮助的。我将工具提示设置为绑定到图标，而图标库具有某种异步加载，因此无法绑定。这很奇怪，因为使用类选择器时可以工作，但不适用于ID。谢谢你的帮助！ - Nick Woodhams

1

您是救星。 - Dev 1

15

这是最简单的方法。只需将此放置在</body>之前：

<script type="text/javascript">
    $("[data-toggle=\"tooltip\"]").tooltip();
</script>

请查看Bootstrap关于工具提示的文档中提供的示例。

例如：

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>

- Marcos Cassiano

2

请关闭类型属性...仅编辑一个拼写错误真是太麻烦了:S - Mohd Abdul Mujib

10

提示框和弹出框不是像下拉菜单或进度条这样的纯CSS插件。要使用提示框和弹出框，您必须使用jQuery（即JavaScript）来激活它们。

因此，假设我们希望在单击HTML按钮时显示一个弹出框。

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

然后，您需要使用以下JavaScript代码来激活弹出框：

$('.popovers-to-be-activated').popover();

实际上，以上的 JavaScript 代码会在所有带有类名 "popovers-to-be-activated" 的 HTML 元素上激活弹出窗口。

毋庸置疑，将上述 JavaScript 代码放入 DOM 就绪回调中，以便在 DOM 准备就绪时立即激活所有弹出窗口：

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});

- Mayank Jaiswal

8

// 更新

2023年3月：已加入Bootstrap v5.x和v4.x的工具提示

Bootstrap v5.x（已测试）

步骤1

包含Bootstrap CSS

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

步骤2

添加HTML代码

<button type="button" class="btn btn-primary" data-bs-toggle="tooltip" data-placement="left" title="I'm a Working Tooltip">Hover me!</button>

步骤三

包含所有脚本。您还需要激活工具提示。如果要移动jquery，则可以将其移动到外部文件activate-tooltip.js。

出于性能原因，工具提示是选择加入的，因此您必须自己初始化它们。

请参阅下面的常见问题解答以了解脚本顺序。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>

<script type="text/javascript">
// If you do not want to use jQuery you can use Pure JavaScript. See FAQ below
$( document ).ready(function() {
    $('[data-bs-toggle="tooltip"]').tooltip();
});
</script>

Bootstrap v4.x（已测试）

步骤1

引入v4 css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

步骤2

添加HTML代码。请注意，data-toggle 适用于 v4，而 data-bs-toggle 适用于 v5

<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="I'm a Working Tooltip">Hover me!</button>

步骤三

请参考 Bootstrap V5.x 中的步骤三。唯一需要更改的是更改data-toggle。

常见问题解答

如果不包含jQuery会发生什么？
jQuery用于启用工具提示。如果未包含，工具提示将无法按预期工作，并且您的控制台中还将出现未捕获的引用错误：$未定义的错误。

不使用jQuery

使用jQuery

我在工具提示中没有看到小箭头。
请确保使用正确的Bootstrap CSS版本

什么是正确的脚本顺序？
您可以使用单个脚本bootstrap.bundle.js，或者使用两个脚本popper.min.js和bootstrap.min.js与jquery和activate-tooltip.js

activate-tooltip.js是一个激活工具提示的一行代码。请参见第3步

工具提示依赖于第三方库Popper.js进行定位。您必须在bootstrap.js之前包含popper.min.js，或者使用包含Popper.js的bootstrap.bundle.min.js / bootstrap.bundle.js，以使工具提示正常工作！

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/activate-tooltip.js"></script>

// or

<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/activate-tooltip.js"></script>

我可以使用原生JS代替jQuery吗？
是的，您可以使用以下代码。请参考文档。

var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl)
});

- Dexter

2

Bootstrap 5旨在不使用jQuery，您的第二步并不是最佳解决方案。 - probitaille

如果有人打算出于其他原因使用jQuery，并且它是可用的，那为什么不使用呢？这算是罪过吗？ - Aadam

如果有其他原因要使用jQuery并且可用，为什么不使用它呢？这是罪过吗？ - Aadam

@probitaille 我已经更新了代码。请看我的常见问题解答。 - Dexter

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Manuel Ebert · Accepted Answer

293

总之：使用jQuery选择器来激活您的工具提示

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

事实上，您不需要使用属性选择器，在任何元素上都可以调用它，即使它的标记中没有 rel="tooltip"。

- Manuel Ebert

14

对于使用Rails的开发者，这个功能已经在bootstrap.js.coffee中定义了，使用$(".tooltip").tooltip()即可。只需确保在application.js文件中包含//= require bootstrap。 - slhck

6

将类名“.tooltip”添加到任何元素上都会破坏我的工具提示。具有类名“.tooltip”的元素内的内容将被隐藏，如果我设法用鼠标找到了隐藏的元素，则工具提示将显示出来。使用其他选择器或类名将正常工作。 - Leonel Galán

4

@Leito说得没错，Bootstrap定义了.tooltip的样式，而默认情况下它们是不可见的。你可以使用rel属性或任何其他类作为选择器。 - Manuel Ebert

3

是的，您需要同时使用HTML标记和JS选择器。这不是应用工具提示的替代方法。 - ATSiem

1

有些人可能在模态框中尝试显示工具提示，但这并不适用于所有的 Bootstrap 版本。如果你在一个普通页面上尝试它，并且它可以工作，那么你就知道问题出在哪里了。 - mjnissim

显示剩余8条评论