接受答案的最新更新有一个问题: 如果您启用了一些工具提示，然后打开一个弹出窗口，然后单击具有工具提示的元素，则工具提示的文本将显示为弹出窗口。

为了防止这种情况，只需添加

 if ($(this).data('bs.popover')) {

在if-statement内部(或将其与&&连接到if-statement中)

// only show one popover at the time and hide on clicking outside
$(document).on('click', function (e) {
    $('[data-toggle="popover"],[data-original-title]').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) {
            if ($(this).data('bs.popover')) {
                (($(this).popover('hide').data('bs.popover') || {}).inState || {}).click = false  // fix for BS 3.3.6
            }
        }
    });
});

我只是在新弹出窗口显示之前删除其他活动弹出窗口(bootstrap 3):

$(".my-popover").popover();

$(".my-popover").on('show.bs.popover',function () {
    $('.popover.in').remove();
});              

这个派对来得太晚了……但我想分享一下 我喜欢弹窗，但是它的内置功能太少了。我写了一个引导扩展.bubble()，这就是我想要的弹窗的一切。四种解题方法。单击外部，切换链接，单击X，然后单击escape。

它会自动定位，所以永远不会离开页面。

https://github.com/Itumac/bootstrap-bubble

这不是毫无理由的自我推销……在我的生活中，我已经多次获得别人的代码，我想贡献我自己的努力。试一试，看看是否对你有用。

$(document).on('click', function(e) {
  $('[data-toggle="popover"]').each(function() {
    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
      $(this).popover('hide').data('bs.popover').inState.click = false
    }

  });
});

对于任何人寻找一个解决方案，工作与Bootstrap 5和没有jQuery，即使弹出窗口是动态生成(即手动触发):

document.querySelector('body').addEventListener('click', function(e) {
    var in_popover = e.target.closest(".popover");

    if (!in_popover) {
        var popovers = document.querySelectorAll('.popover.show');

        if (popovers[0]) {
            var triggler_selector = `[aria-describedby=${popovers[0].id}]`;

            if (!e.target.closest(triggler_selector)) {
                let the_trigger = document.querySelector(triggler_selector);
                if (the_trigger) {
                    bootstrap.Popover.getInstance(the_trigger).hide();
                }
            }
        }
    }
});

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

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>