javascript - Bootstrap 3 工具提示不起作用

Question

遵循了一个非常过时的 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]' });
});

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

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>