$('html').on('click.popover', function (e) {
    var allpopins = $('.popover.in');
    if (allpopins.has(e.target).length > 0 &&
        !$('.btn', allpopins).is(e.target))
        return;
    // recognise pop-up 
    var id = $(e.target).attr('aria-describedby');
    var popin = $("#" + id);
    //on any button click in entire pop-up hide this pop-ups
    $(popin).on(".btn", function () { popin.remove(); });
    // on any place out of entire popup hide all pop-ups 
    $('.popover.in').not(popin).remove();
});

这是我最好的性能解决方案。欢呼。

我有问题与mattdlockyer的解决方案，因为我设置弹窗链接动态使用如下代码:

$('body').popover({
        selector : '[rel="popover"]'
});

所以我必须这样修改它。它为我解决了很多问题:

$('html').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('destroy');
    }
  });
});

记住destroy删除元素，所以选择器部分在初始化弹窗时很重要。

根据最高的两个答案，我有一个小方法:

<span class="btn btn-info btn-minier popover-info" data-rel="popover"
                                              data-placement="bottom" data-html="true" title=""
                                              data-content="popover-content"
                                              data-original-title="popover-title">
                                            <i class="ace-icon fa fa-info smaller-100"></i>
                                        </span>

            $('[data-rel=popover]').popover({html: true});
            $(document).on("shown.bs.popover", '[data-rel=popover]', function () {
                $('[data-rel="popover"][popover-show="1"]').popover('hide');
                $(this).attr('popover-show', '1');
            });
            $(document).on("hidden.bs.popover", '[data-rel=popover]', function () {
                if ($(this).attr('popover-show') === '0') {
                    // My important fix: using bootstrap 3.4.1, if hide popover by .popover('hide') and click to show, popover internal treat it is already shown and dispatch hidden event immediately without popover anything.
                    $(this).popover('toggle');
                } else {
                    $(this).attr('popover-show', '0');
                }
            });
            $('html').on('click', function (e) {
                if (typeof $(e.target).data('original-title') == 'undefined'
                    && typeof $(e.target).parent().data('original-title') == 'undefined'
                    && !$(e.target).parents().is('.popover.in')) {
                    $('[data-rel="popover"][popover-show="1"]').popover('hide');
                }
            });

根据http://getbootstrap.com/javascript/#popovers，

<button type="button" class="popover-dismiss" data-toggle="popover" title="Dismissible popover" data-content="Popover Content">Dismissible popover</button>

使用焦点触发器可以在用户下一次单击时取消弹出窗口。

$('.popover-dismiss').popover({
    trigger: 'focus'
})

我试过很多以前的答案，真的没有一个对我有效，但这个解决方案管用:

https://getbootstrap.com/docs/3.3/javascript/#dismiss-on-next-click

他们建议使用锚标记而不是按钮，并注意role="button" + data-trigger="focus" + tabindex="0"属性。

Ex:

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" 
data-trigger="focus" title="Dismissible popover" data-content="amazing content">
Dismissible popover</a>

所谓的高投票的解决方案对我来说都不正确。 当第一次打开和关闭(通过单击其他元素)弹出窗口后，它不会再次打开，直到你在触发链接上单击两次而不是一次，这将导致一个错误。

所以我稍微修改了一下:

$(document).on('click', function (e) {
    var
        $popover,
        $target = $(e.target);

    //do nothing if there was a click on popover content
    if ($target.hasClass('popover') || $target.closest('.popover').length) {
        return;
    }

    $('[data-toggle="popover"]').each(function () {
        $popover = $(this);

        if (!$popover.is(e.target) &&
            $popover.has(e.target).length === 0 &&
            $('.popover').has(e.target).length === 0)
        {
            $popover.popover('hide');
        } else {
            //fixes issue described above
            $popover.popover('toggle');
        }
    });
})