為什么引導工具提示沒有初始化兩次？
[英]why bootstrap tool-tip is not initializing two times?
問題描述
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script> </head> <body> <div class="container"> <h3>Tooltip Example</h3> <a data-toggle="tooltip" title="Hooray!">Hover over me</a> </div> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); $('[data-toggle="tooltip"]').off("mouseenter mouseleave"); $('[data-toggle="tooltip"]').tooltip(); }); </script> </body> </html>
為什么即使我初始化兩次也無法獲得工具提示？
3 個解決方案
解決方案1
1 已采納 2017-02-16 13:57:04
DavidG的日志記錄。 基本上，如果要再次調用tooltip並將其附加到偵聽器，則需要完全銷毀該tooltip 。 通過off調用off您只是刪除了偵聽器，而沒有破壞tooltip 。 因此，當您第二次調用tooltip時，它不會再次初始化tooltip 。 由於以下行：
if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
https://github.com/twbs/bootstrap/blob/v3-dev/js/tooltip.js#L501
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script> </head> <body> <div class="container"> <h3>Tooltip Example</h3> <a data-toggle="tooltip" data-placement="top" title="Hooray!">Hover over me</a> </div> <script> $(document).ready(function(){ console.log("init"); $('[data-toggle="tooltip"]').tooltip(); setTimeout(function() { console.log("destroy"); $('[data-toggle="tooltip"]').tooltip("destroy"); setTimeout(function() { console.log("reinit"); $('[data-toggle="tooltip"]').tooltip(); }, 5000); }, 5000); }); </script> </body> </html>
解決方案2
0 2017-02-16 13:22:45
我刪除了重復的聲明並添加了工具提示放置位置，現在它可以正常工作了
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script> </head> <body> <div class="container"> <h3>Tooltip Example</h3> <a data-toggle="tooltip" data-placement="top" title="Hooray!">Hover over me</a> </div> <script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script> </body> </html>
解決方案3
0 2017-02-16 13:37:03
嘗試這個：
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script> </head> <body> <div class="container"> <h3>Tooltip Example</h3> <a id="anchor" data-toggle="tooltip" title="Hooray!">Hover over me</a> </div> <script> var handler = function (e) { $('[data-toggle="tooltip"]').tooltip(); } $(document).ready(function(){ $('[data-toggle="tooltip"]').off("mouseenter mouseleave",handler); $('[data-toggle="tooltip"]').on("mouseenter mouseleave",handler); }); </script> </body> </html>
它可以工作，但是我相信，如果您詳細說明要執行的操作，可能會有更好的解決方案。
為什么我無法在Bootstrap工具提示中顯示圖像？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.