防止bootstrap工具提示隐藏在点击它上面

Question

当我点击它时,我想阻止工具提示隐藏.除了我点击身体的任何地方它应该隐藏它.

工具提示甚至可以在标签上工作.

小提琴:

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');
        }
    });                
});

Answer 1

我可以建议触发弹出窗口 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功能更改为以下内容:

$('[data-toggle="popover"]').on("blur",function(){
    if(close)
        $(this).popover('hide');
    else {
       $(this).focus();
       close = true;
    }
});

小提琴