来自@guya的答案是有效的，除非你在弹出窗口中有像日期选择器或时间选择器这样的东西。为了解决这个问题，这就是我所做的。

if (typeof $(e.target).data('original-title') === 'undefined' && 
    !$(e.target).parents().is('.popover.in')) {
        var x = $(this).parents().context;
        if(!$(x).hasClass("datepicker") && !$(x).hasClass("ui-timepicker-wrapper")){
            $('[data-original-title]').popover('hide');
        }
}

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

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

这种方法确保您可以通过单击页面上的任何位置来关闭弹出窗口。如果你点击另一个可点击的实体，它会隐藏所有其他弹窗。animation:false是必需的，否则你将在你的控制台得到jquery .remove错误。

$('.clickable').popover({
 trigger: 'manual',
 animation: false
 }).click (evt) ->
  $('.clickable').popover('hide')
  evt.stopPropagation()
  $(this).popover('show')

$('html').on 'click', (evt) ->
  $('.clickable').popover('hide')

使用Matt Lockyer的代码，我做了一个简单的重置，所以dom不会被隐藏的元素覆盖。

马特的代码：http://mattlockyer.com/2013/04/08/close-a-twitter-bootstrap-popover-when-clicking-outside/

小提琴:http://jsfiddle.net/mrsmith/Wd2qS/

    $('body').on('click', function (e) {
    //hide popover from dom to prevent covering elements
    $('.popover').css('display', 'none');
    //bring popover back if trigger element is clicked
    $('[data-toggle="popover"]').each(function () {
        if ($(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $('.popover').css('display', 'block');
        }
    });
    //hide popover with .popover method
    $('[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');
        }
    });
});

来自@guya的答案是有效的，除非你在弹出窗口中有像日期选择器或时间选择器这样的东西。为了解决这个问题，这就是我所做的。

if (typeof $(e.target).data('original-title') === 'undefined' && 
    !$(e.target).parents().is('.popover.in')) {
        var x = $(this).parents().context;
        if(!$(x).hasClass("datepicker") && !$(x).hasClass("ui-timepicker-wrapper")){
            $('[data-original-title]').popover('hide');
        }
}

试试这个，点击外面会隐藏。

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