如何在弹出窗口外单击时隐藏弹出窗口

Question

请参阅此演示，了解如何在点击弹出窗口外的任何地方时隐藏弹出式窗口。现在我们可以通过单击链接隐藏它，但我们想通过单击弹出窗口外的任何位置来隐藏它。请帮助我，非常感谢。

HTML：

<div>
    <a href="#" id="popover1" data-original-title="<b>testing</b>" data-placement="bottom">Click</a>

    <div id="popover_content_wrapper1" style="display: none">
        <a href="#" id="popover2" data-original-title="<b>testing again</b>" data-placement="bottom">Click again</a>
    </div>

    <div id="popover_content_wrapper2" style="display: none">
        <b>Hello world</b>
    </div>
</div>

JQuery：

$('#popover1').popover({
    html: true,
    trigger: 'manual',
    content: function() {
        return $('#popover_content_wrapper1').html();
    }
});

$(document).on('click', '#popover1', function() {
    $(this).popover('toggle');
    $('#popover2').popover({
    html: true,
    trigger: 'manual',
    content: function() {
        return $('#popover_content_wrapper2').html();
    }
});
});

$(document).on('click', '#popover2', function() {
    $(this).popover('toggle');
});

请尝试此演示：http://jsfiddle.net/kg7nyo6e/1/