引导工具提示不工作

我快疯了。

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

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

谢谢你的帮助!

当前回答

将代码放入文档中

$(document).ready(function () {
    if ($("[rel=tooltip]").length) {
        $("[rel=tooltip]").tooltip();
    }
});

在我的情况下，我也错过了http://twitter.github.com/bootstrap/assets/css/bootstrap.css上的css类工具提示儿子，别忘了这一点。

2012-05-30 18:27:25

其他回答

你可以使用Popper.js

<script src="JavaScript/popper.min.js"></script>
<script src="JavaScript/bootstrap.min.js"></script>

并调用tooltip函数:

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

2019-11-09 21:32:38

将代码放入文档中

$(document).ready(function () {
    if ($("[rel=tooltip]").length) {
        $("[rel=tooltip]").tooltip();
    }
});

在我的情况下，我也错过了http://twitter.github.com/bootstrap/assets/css/bootstrap.css上的css类工具提示儿子，别忘了这一点。

2012-05-30 18:27:25

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

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

2012-12-13 11:38:32

使用最新的Jquery库，如果你使用最新的bootstrap 2.0.4和Jquery -1.7.2.js，你不需要任何Jquery选择器

只需使用rel="tooltip" title="Your title " data-placement=" " "

根据您的意愿在数据放置中使用顶部/底部/左/右。

2012-07-06 08:20:35

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>

2022-06-05 15:41:25

引导工具提示不工作

推荐文章

最新文章

标签