防止引导工具提示在单击时隐藏 [英] prevent bootstrap tooltip from hiding on click over it
本文介绍了防止引导工具提示在单击时隐藏的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想防止工具提示在单击时隐藏.除了我单击身体的任何地方都应该将其隐藏.
I want to prevent the tooltip from hiding when i click over it. except that wherever i click on body it should hide it.
工具提示甚至可以在制表符上工作.
Tooltip should work even on tabbing.
js小提琴:
http://jsfiddle.net/C5GBU/41/
html:
<div class="bs-example tooltip-demo">
<div class="bs-example-tooltips">
<input type="text" class="form-control" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title=""/>
<input type="text" class="form-control" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title=""/>
<input type="text" class="form-control" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus." data-original-title="" title=""/>
</div>
</div>
jquery:
$('[data-toggle="popover"]').popover({trigger:"focus"});
$('body').on('click', function (e) {
$('[data-toggle="popover"]').each(function () {
//the 'is' for buttons that trigger popups
//the 'has' for icons within a button that triggers a popup
if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
$(this).popover('hide');
}
});
});
推荐答案
我可以建议触发弹出窗口manually
May I suggest triggering the popover manually
var close = true;
$('[data-toggle="popover"]').popover({trigger:"manual"});
$(document).on('mousedown', function (e) {
if($(e.target).hasClass('popover-content'))
close = false;
else
close = true;
});
$('[data-toggle="popover"]').on("blur",function(){
if(close)
$(this).popover('hide');
else
$(this).focus();
});
$('[data-toggle="popover"]').on("focus",function(){
if(close)
$(this).popover('show');
});
示例:小提琴
针对制表符问题的更新修补程序:
将.blur
函数更改为以下内容:
Change the .blur
function to the following:
$('[data-toggle="popover"]').on("blur",function(){
if(close)
$(this).popover('hide');
else {
$(this).focus();
close = true;
}
});
这篇关于防止引导工具提示在单击时隐藏的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文