为什么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工具提示不是初始化两次？

回答

相关问题