Twitter Bootstrap:在其中一个打开时隐藏其他popovers

Question

以下Bootstrap代码为我提供了"粘性"弹出窗口(因此用户可以与弹出窗口内的内容进行交互).问题是当打开弹出窗口时,应关闭(隐藏)其他弹出窗口.知道如何实现这个吗？

$("[rel=popover]").popover({placement:'bottom', trigger:'manual'}).hover(function(){
    $(this).popover('show');
    e.preventDefault(); 
});

Answer 1

这里有一个非常简单的解决方案(不是我的解决方案,但效果很好):

$('.link-popover').click(function(){
    $('.link-popover').not(this).popover('hide'); //all but this
});

Answer 2

我一直在玩这个游戏,并且还有一些关于触发手动显示/隐藏的其他问题,以使其发挥得很好.哈弗实际上是mousein和mouseout,除非你在一些额外的检查,添加,你会碰到,我只是做的问题!

这是我的解决方案,我将尝试解释我所做的事情.

$(function () {

    var overPopup = false;

    $('[rel=popover]').popover({
        trigger: 'manual',
        placement: 'bottom'

    // replacing hover with mouseover and mouseout
    }).mouseover(function (e) {
        // when hovering over an element which has a popover, hide
        // them all except the current one being hovered upon
        $('[rel=popover]').not('#' + $(this).attr('id')).popover('hide');
        var $popover = $(this);
        $popover.popover('show');

        // set a flag when you move from button to popover
        // dirty but only way I could think of to prevent
        // closing the popover when you are navigate across
        // the white space between the two
        $popover.data('popover').tip().mouseenter(function () {
            overPopup = true;
        }).mouseleave(function () {
            overPopup = false;
            $popover.popover('hide');
        });

    }).mouseout(function (e) {
        // on mouse out of button, close the related popover
        // in 200 milliseconds if you're not hovering over the popover
        var $popover = $(this);
        setTimeout(function () {
            if (!overPopup) {
                $popover.popover('hide');
            }
        }, 200);
    });
});

这对我来说非常适合以下html:

<a href="#" id="example1" class="btn large primary" rel="popover" data-content="Example 1!!!" data-original-title="Example 1 title">Button 1</a>
<a href="#" id="example2" class="btn large primary" rel="popover" data-content="Example 2!!!" data-original-title="Example 2 title">Button 2</a>
<a href="#" id="example3" class="btn large primary" rel="popover" data-content="Example 3!!!" data-original-title="Example 3 title">Button 3</a>

希望能把你排除在外:)

Answer 3

根据引导程序文档:使用焦点触发器在用户下次单击时关闭弹出窗口.

<a href="#" tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-   trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Answer 4

使用Bootstrap 3的事件回调,您可以:

$(document).on('show.bs.popover', function() {
  $('.popover').not(this).popover('hide');
});

并在coffeescript

$(document).on 'show.bs.popover', ->
    $('.popover').not(this).popover('hide')