Bootstrap Popover

Question

I would like to be able to click outside the popover to make it dissapear.

This code is working well - closes one popover when another is opened and ofcourse when you clcik the button again it goes away.

var $visiblePopover;

$('body').on('click', '[rel="popover"]', function() {
  var $this = $(this);

  // check if the one clicked is now shown
  if ($this.data('popover').tip().hasClass('in')) {

// if another was showing, hide it
$visiblePopover && $visiblePopover.popover('hide');

// then store reference to current popover
$visiblePopover = $this;

  } else { // if it was hidden, then nothing must be showing
$visiblePopover = '';
  }
});​

I need to keep this current functionality but modify it so that it does the same thing for when you click outside the popover as well.

Answer 1

you can do it simply by adding:

$('html').click(function(e) {
     $('.btn').popover('hide');
});

jsfiddle

Answer 2

This little trick is handy if you want to close all other popovers except the one that has been clicked on:

$('.popover').click(function (evt) {
    evt.stopPropagation();
    $('.popover').not(this).popover('hide');
});