How can we close a Twitter Bootstrap popover with a click from anywhere (else) on the page?

Answer

Presuming that only one popover can be visible at any time, you can use a set of flags to mark when there's a popover visible, and only then hide them.

If you set the event listener on the document body, it will trigger when you click the element marked with 'popup-marker'. So you'll have to call stopPropagation() on the event object. And apply the same trick when clicking on the popover itself.

Below is a working JavaScript code that does this. It uses jQuery >= 1.7

jQuery(function(){var isVisible =false;var hideAllPopovers =function(){
       $('.popup-marker').each(function(){
            $(this).popover('hide');});};

    $('.popup-marker').popover({
        html:true,
        trigger:'manual'}).on('click',function(e){// if any other popovers are visible, hide themif(isVisible){
            hideAllPopovers();}

        $(this).popover('show');// handle clicking on the popover itself
        $('.popover').off('click').on('click',function(e){
            e.stopPropagation();// prevent event for bubbling up => will not get caught with document.onclick});

        isVisible =true;
        e.stopPropagation();});


    $(document).on('click',function(e){
        hideAllPopovers();
        isVisible =false;});});