爲什麼bootstrap工具提示不是初始化兩次？

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <title>Bootstrap Example</title> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script> 
 
</head> 
 
<body> 
 

 
\t <div class="container"> 
 
\t \t <h3>Tooltip Example</h3> 
 
\t \t <a data-toggle="tooltip" title="Hooray!">Hover over me</a> 
 
\t </div> 
 

 
\t <script> 
 
\t $(document).ready(function(){ 
 
\t \t $('[data-toggle="tooltip"]').tooltip(); 
 
       $('[data-toggle="tooltip"]').off("mouseenter mouseleave"); 
 
\t \t $('[data-toggle="tooltip"]').tooltip(); 
 

 
\t }); 
 
\t </script> 
 

 
</body> 
 
</html>

爲什麼我不能夠得到提示，即使我初始化兩次？

來源

2017-02-16 Mahi

工具提示組件是jQueryUI的一部分不jQuery的：由於下面的行的。你也必須導入jQueryUI：http://code.jquery.com/ui/ – Sebastian

@Sebastian不，tooltip是Bootstrap的一部分。 – DavidG

@DavidG我不好，抱歉。我試過你的代碼Mahi，它的工作原理如下：https://jsfiddle.net/R3l4x3/jbkocd0p/ 你的控制檯有任何錯誤嗎？ – Sebastian

DavidG對日誌的評論。基本上你需要徹底銷燬tooltip，如果你想再次打電話tooltip並讓它連接聽衆。通過調用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> 
 
\t <title>Bootstrap Example</title> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script> 
 
</head> 
 
<body> 
 

 
\t <div class="container"> 
 
\t \t <h3>Tooltip Example</h3> 
 
\t \t <a data-toggle="tooltip" data-placement="top" title="Hooray!">Hover over me</a> 
 
\t </div> 
 

 
\t <script> 
 
\t $(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); 
 
\t }); 
 
\t </script> 
 

 
</body> 
 
</html>

來源

2017-02-16 13:57:04 Danny

謝謝，但在我的項目工具提示（'銷燬'）不起作用。 :( – Mahi

@Mahi你使用的是什麼版本的引導程序？它已被更改爲版本4中的'dispose'。 – Danny

感謝它的工作:) +2 – Mahi

我刪除重複的聲明，並增加了一個提示位置和現在的作品

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <title>Bootstrap Example</title> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script> 
 
</head> 
 
<body> 
 

 
\t <div class="container"> 
 
\t \t <h3>Tooltip Example</h3> 
 
\t \t <a data-toggle="tooltip" data-placement="top" title="Hooray!">Hover over me</a> 
 
\t </div> 
 

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

 
</body> 
 
</html>

來源

2017-02-16 13:22:45 Sean

不，這不是我想要的。 ..爲什麼它不工作，如果我初始化兩次？ – Mahi

我不確定爲什麼它不起作用，如果你初始化它兩次，但我知道這不是好的做法，可以打破東西。你爲什麼要初始化它兩次？ – Sean

其實，我只是重新嘗試過。如果您初始化它兩次，它會很好地工作。問題是缺乏數據放置標籤。 – Sean

試試這個：

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <title>Bootstrap Example</title> 
 
\t <meta charset="utf-8"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> 
 
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
 
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.js"></script> 
 
</head> 
 
<body> 
 

 
\t <div class="container"> 
 
\t \t <h3>Tooltip Example</h3> 
 
\t \t <a id="anchor" data-toggle="tooltip" title="Hooray!">Hover over me</a> 
 
\t </div> 
 

 
\t <script> 
 
    var handler = function (e) { 
 
    \t $('[data-toggle="tooltip"]').tooltip(); 
 
    } 
 
\t $(document).ready(function(){ 
 
    $('[data-toggle="tooltip"]').off("mouseenter mouseleave",handler); 
 
    $('[data-toggle="tooltip"]').on("mouseenter mouseleave",handler); 
 
\t }); 
 
\t </script> 
 

 
</body> 
 
</html>

它可以工作，但我相信如果你更詳細地說明你想要做什麼，可能會有更好的解決方案。

來源

2017-02-16 13:37:03

爲什麼bootstrap工具提示不是初始化兩次？

回答

相關問題