twitter-bootstrap 在鼠标离开时保持 Twitter Bootstrap 工具提示打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15627619/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Keep Twitter Bootstrap Tooltip open on mouseleave
提问by John
For a particular case and element I need to show Bootstrap Tooltip by default (once the page is loaded) an always keep it open (even on mouseover and mouseout).
对于特定情况和元素，我需要默认显示 Bootstrap 工具提示（一旦页面加载）并始终保持打开状态（即使在鼠标悬停和鼠标悬停时）。
That's the code I use to open tooltip by default on the element:
这是我用来在元素上默认打开工具提示的代码：
$('#myelement').tooltip('show');
Now I'm not sure how to prevent/disable the default action of tooltip on mouseover & mouseout. Any idea?
现在我不确定如何防止/禁用鼠标悬停和鼠标移出工具提示的默认操作。任何的想法？
Thanks in advance!
提前致谢！
回答by John
Solution found. Manual Trigger does the trick - here is the updated code:
找到解决方案。手动触发器可以解决问题 - 这是更新后的代码：
$('.taskTooltip').tooltip({trigger: 'manual'}).tooltip('show');
回答by PhilMaGeo
Use unbind() after show : it will remove all event handler and thus the tooltip won't hide on mouseleave
在显示后使用 unbind() ：它将删除所有事件处理程序，因此工具提示不会在鼠标离开时隐藏
$(".circle").tooltip("show");
$(".circle").unbind();.circle{
margin-left:100px;
margin-top:80px;
width:10px;
height:10px;
background-color:#0088ff;
border-radius:50%;
border:1px solid #ff8800;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="circle" data-toggle="tooltip" data-placement="top" title="Hello World !"></div>回答by lechat
You can try this too.
你也可以试试这个。
Jsfiddle: https://jsfiddle.net/shuNaka/o1ncd6r7/
jsfiddle：https://jsfiddle.net/shuNaka/o1ncd6r7/
js:
js：
$('.switch').on('click touch', function (e) {
$('.tltip-element').not($(this).parents('.tltip-wrapper').find('.tltip-element')).fadeOut('fast');
$(this).parents('.tltip-wrapper').find('.tltip-element').fadeToggle('fast');
});
html:
html：
<div>
<div class="tltip-wrapper">
<a href="#" class="switch">
click me 1 </a>
<div class="tltip-element" style="display: block;">
<div class="tltip-content">
<span>
test_1
</span>
<span class="">
test_2
</span>
</div>
</div>
</div>
</div>
css:
css：
.tltip-wrapper {
position: relative;
cursor: default;
}
.tltip-wrapper .tltip-element {
color: #525252;
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0px 6px 12px rgba(155, 183, 182, 0.4);
border: solid 1px #83A7AD;
border-radius: 3px;
padding: 12px 12px 12px 12px;
font-size: 12px;
text-align: left;
display: none;
position: absolute;
left: 10%;
top: -10%;
}
.tltip-wrapper .tltip-element .tltip-content {
line-height: 0;
}
