为什么引导工具提示没有初始化两次？
[英]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>
why i am not able to get tooltip even if i initializing two times ?? 
为什么即使我初始化两次也无法获得工具提示？
3 个解决方案
解决方案1
1 已采纳 2017-02-16 13:57:04
DavidG's comment with logging. DavidG的日志记录。 Basically you need to completely destroy the tooltip if you want to be able to call tooltip again and have it attach the listeners. 基本上，如果要再次调用tooltip并将其附加到侦听器，则需要完全销毁该tooltip 。 By doing calling off you were just removing the listeners but not destroying the tooltip . 通过off调用off您只是删除了侦听器，而没有破坏tooltip 。 Therefore when you called tooltip a second time it would not initialize the tooltip again. 因此，当您第二次调用tooltip时，它不会再次初始化tooltip 。 Because of the following line: 由于以下行：
if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options)))
https://github.com/twbs/bootstrap/blob/v3-dev/js/tooltip.js#L501 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
I removed the duplicate declaration and added a tooltip placement and now it works 我删除了重复的声明并添加了工具提示放置位置，现在它可以正常工作了
<!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
Try this: 尝试这个：
<!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>
It works, though I believe there might be better solutions if you elaborate more on what exactly it is that you want to do. 它可以工作，但是我相信，如果您详细说明要执行的操作，可能会有更好的解决方案。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.