防止引导工具提示在单击时隐藏

Question

我想防止工具提示在我单击它时隐藏。除了我点击正文的任何​​地方它都应该隐藏它。

工具提示即使在制表符上也应该可以工作。

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

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

示例：Fiddle

标签问题的更新修复：

将.blur 函数更改为以下内容：

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

Fiddle

Answer 2

游戏有点晚了，但在尝试其他答案后我能够解决这个问题：

HTML：

<a data-toggle="popover" data-trigger="manual" tabindex="0" data-html="true" data-title="my title <button class='close'>×</button>" data-content="my content">
    <i class="fa fa-info-circle"></i>
</a>

CSS：

/* not necessary, but makes the x look better, imo */
.popover-title .close {
    margin-top: -3px;
    margin-right: -6px;
}

jQuery:

$("[data-toggle='popover']").popover();

// Custom Bootstrap Popover triggers (requires triggers set to manual)
$("body").on("click", function (e) {

    // Trigger toggles associated popover
    if ($(e.target).hasClass("fa-info-circle")) {
        $(e.target).parent().popover("toggle");
    }

    // Popover x closes associated popover
    else if ($(e.target).hasClass("close")) {
        $(e.target).closest(".popover").siblings("[data-toggle='popover']").popover("hide");
    }

    // Everything else closes all popovers
    else if (!$(e.target).closest(".popover").length) {
        $(".popover").siblings("[data-toggle='popover']").popover("hide");
    }
});

• 单击信息图标可切换关联的弹出框。
• 单击弹出框 x 将关闭关联的弹出框。
• 点击其他任何地方都会关闭所有弹出框。
• 可以同时打开多个弹出框。
• HTML 也可以在弹出框正文中使用。
• 可以添加/删除弹出框，并且处理程序仍然可以工作。