遵循了一个非常过时的 Bootstrap 教程,但它的结构非常好,因此尝试完成类(class)。通过查看 bootstrap 文档,我已经能够解决大部分问题,而且我有点坚持让工具提示在主 index.php 页面上工作。请记住,我是网络开发新手。
如果脚本在同一个 php 文件中,我可以获得工具提示。如下图:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
body 内部:
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip : left">Tooltip : Left</button>
但是,如果我从 index.php 中删除脚本,并将其放在 myscript.js 中。它行不通,我尝试了不同的方法并搜索了 SO,过去几乎尝试了所有建议,但似乎没有任何效果。我知道正在加载 myscript.js,因为我在那里有另一个功能可以将鼠标悬停在菜单下拉菜单上,而且控制台上也没有错误。
在 myscript.js 中
$("[data-toggle='tooltip']").tooltip();
我也试过这个:
$(document).ready(function() {
$("body").tooltip({ selector: '[data-toggle=tooltip]' });
});
关于为什么不起作用的任何建议?
最佳答案
代码没问题,我不知道您的 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>
关于javascript - Bootstrap 3 工具提示不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44608889/