Bootstrap 3工具提示不起作用

Question

遵循一个非常过时的引导教程，但它的结构非常好，因此试图完成课程。 通过查看引导文档，我已经能够解决大部分问题，并且我有点坚持让工具提示在主 index.php 页面上工作。 请记住，我是网络开发的新手。

如果脚本在同一个 php 文件上，我可以让工具提示工作。 如下所示：

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

体内：

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

但是，如果我从 index.php 中删除脚本，并将其放在 myscript.js 中。 它行不通，我尝试了不同的方法并搜索了过去几乎所有的建议，但似乎没有任何效果。 我知道 myscript.js 正在加载，因为我有另一个功能可以将鼠标悬停在菜单下拉菜单上，控制台上也没有错误。

在 myscript.js 中

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

我也试过这个：

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

关于为什么不起作用的任何建议？

Answer 1

代码还可以，我不知道你的bootstrap版本以及你如何设置所以我猜可能是问题所在。

此外，您尝试添加left工具提示，但需要一些空间才能显示，因此请查看以下示例。

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

 #mybtn { margin-left: 200px; margin-top: 100px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <button id="mybtn" type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip : left">Tooltip : Left</button> 

Answer 2

这个问题的正确答案是chrome缓存。 我使用开发工具来禁用缓存。 禁用Chrome缓存以进行网站开发我偶然发现了另一个问题。

Answer 3

如果您使用的是 jquery ui，请按以下顺序加载脚本。

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

Answer 4

就我而言，当我将 jquery 链接放在 head 标签而不是 body 标签中时，它就可以正常工作。 可能是因为 js 的加载方式。