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

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

修改后的接受方案。我的经验是，在一些弹窗被隐藏后，它们必须被点击两次才能再次显示。下面是我所做的，以确保弹窗('hide')不会被已经隐藏的弹窗调用。

$('body').on('click', function (e) {
    $('[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) {
            var popoverElement = $(this).data('bs.popover').tip();
            var popoverWasVisible = popoverElement.is(':visible');

            if (popoverWasVisible) {
                $(this).popover('hide');
                $(this).click(); // double clicking required to reshow the popover if it was open, so perform one click now
            }
        }
    });
});

这基本上不是很复杂，但有一些检查要做，以避免故障。

演示(jsfiddle)

var $poped = $('someselector');

// Trigger for the popover
$poped.each(function() {
    var $this = $(this);
    $this.on('hover',function() {
            var popover = $this.data('popover');
            var shown = popover && popover.tip().is(':visible');
            if(shown) return;        // Avoids flashing
            $this.popover('show');
    });
});

// Trigger for the hiding
 $('html').on('click.popover.data-api',function() {
    $poped.popover('hide');
});

使用bootstrap 2.3.2，你可以将触发器设置为“focus”，它就可以工作了:

$('#el').popover({trigger:'focus'});

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

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

好吧，这是我第一次尝试在stackoverflow上回答一些东西，所以这里什么都没有:P

似乎不太清楚这个功能在最新的引导程序上是否能够开箱即用(好吧，如果您愿意在用户可以单击的地方做出妥协的话。我不确定你是否必须设置“点击悬停”，但在iPad上，点击是一种切换。

最终的结果是，在桌面上，你可以悬停或点击(大多数用户都会悬停)。在触控设备上，触摸元素将使其上升，再次触摸将使其下降。当然，这与你最初的需求有一点妥协，但至少你的代码现在更干净了:)

$ (" .my-popover ") .popover ({ 触发:'点击悬停' })；