jQuery - Twitter Bootstrap - close all popovers on body's any elements focus

An alternative:

$(document).on('focus', ':not(.popover)', function(){
    $('.popover').popover('hide');
});

Edit:

So as it turns out, my above answer is incorrect. You need to call .popover('hide') on the element the popover was instantiated on... not the .popover itself. AND you need to stop propagation of the click event on the link (i.e., return false in click handler) so it doesn't bubble up to the document root. See this for an answer, http://jsfiddle.net/aFacG/1/.

HTML

<a data-content="a popover" id="mypopover" href="#">click me</a>

JS

$(document).ready(function(){
  $("#mypopover").popover();

  $(document).on('click', function(){
      $("#mypopover").popover('hide');
  });

  $('#mypopover').click(function(){
      return false;
  });
});

The problem with the current accepted answer is that popover hides even when you click inside the tooltip (bad if you have an element you want to interact with inside the popover..like an input field).

Use the stopPropagation method on your popover container to prevent the hide event from bubbling up the DOM.

UPDATE(bootstrap url changed):http://jsfiddle.net/bNvX7/10/

$(document).ready(function(){

    //Initialize popover on element
    $("#mypopover").popover();

    //Attach click handler to document
    $(document).bind('click', function (e) {
        $("#mypopover").popover('hide');
    });

    //Dont hide when I click anything inside #container
    $('#container').bind('click', function(e) {
        e.stopPropagation();
    });
});

Being very simplistic:

$('.popover').remove();