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 的加載方式。