我做了一个jsfiddle来告诉你如何做到这一点:

http://jsfiddle.net/3yHTH/

其思想是在单击按钮时显示弹出窗口，在单击按钮外时隐藏弹出窗口。

HTML

<a id="button" href="#" class="btn btn-danger">Click for popover</a>

JS

$('#button').popover({
    trigger: 'manual',
    position: 'bottom',
    title: 'Example',
    content: 'Popover example for SO'
}).click(function(evt) {
    evt.stopPropagation();
    $(this).popover('show');
});

$('html').click(function() {
    $('#button').popover('hide');
});

答案很好，只要添加一个angular指令，以防你像我一样使用angular:

app.directive('popover', ['$document', function($document) {
    return {
        restrict: 'EA',
        link: function(scope, elem, attrs) {
            $(document).ready(function() {
                $('[data-toggle="popover"]').popover();
            });

            elem.bind('click', function(e) {
                $('#notification').popover('toggle');
            })

            $('body').on('click', function (e) {
                //the 'is' for buttons that trigger popups
                //the 'has' for icons within a button that triggers a popup
                if (!elem.is(e.target)
                    && elem.has(e.target).length === 0
                    && $('.popover').has(e.target).length === 0) {
                    elem.popover('hide');
                }
            });
        }
    };
}]);

html代码:

<a popover tabindex="0" role="button"
   id="notification"
   data-toggle="popover" data-trigger="manual"
   data-container="body" data-placement="bottom"
   data-content="This is a popover">
   Popover button
</a>

它应该像使用data-trigger='click focus'一样简单，因为根据bootstrap:

弹出窗口如何触发-点击|悬停|焦点|手动。你可以传递多个触发器;用一个空格把它们分开。手动不能与任何其他触发器结合使用。

然而，由于未知的原因，同时使用点击和聚焦并不适合我，相反，我必须手动切换它。

$('html').on('mouseup', function(e) {
    if(!$(e.target).closest('.popover').length) {
        $('.popover').each(function(){
            $(this.previousSibling).popover('hide');
        });
    }
});

这将关闭所有弹出窗口，如果你点击任何地方，除了一个弹出窗口

更新引导4.1

$("html").on("mouseup", function (e) {
    var l = $(e.target);
    if (l[0].className.indexOf("popover") == -1) {
        $(".popover").each(function () {
            $(this).popover("hide");
        });
    }
});

对于任何人寻找一个解决方案，工作与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();
                }
            }
        }
    }
});

我做了一个jsfiddle来告诉你如何做到这一点:

http://jsfiddle.net/3yHTH/

其思想是在单击按钮时显示弹出窗口，在单击按钮外时隐藏弹出窗口。

HTML

<a id="button" href="#" class="btn btn-danger">Click for popover</a>

JS

$('#button').popover({
    trigger: 'manual',
    position: 'bottom',
    title: 'Example',
    content: 'Popover example for SO'
}).click(function(evt) {
    evt.stopPropagation();
    $(this).popover('show');
});

$('html').click(function() {
    $('#button').popover('hide');
});

这个解决方案很有效:

$("body")   .on('click'     ,'[data-toggle="popover"]', function(e) { 
    e.stopPropagation();
});

$("body")   .on('click'     ,'.popover' , function(e) { 
     e.stopPropagation();
});

$("body")   .on('click'  , function(e) {
        $('[data-toggle="popover"]').popover('hide');
});