Dismiss Bootstrap Popover by Clicking outside

by Korah Babu Varghese

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<a href="#">Open Popover</a>

<button id="t">
</button>
</button>

JavaScript

/* 
Related StackOverflow answer
http://stackoverflow.com/a/19638199/275333 
*/

/***** Create the popover **************/

var options = {
 content: '<h1>Pop Over Content</h1>',
 html: true,
 placement: 'bottom'
};

$('a').popover(options);

/***** Dismiss all popovers by clicking outside, don't dismiss if clicking inside the popover content  **************/

$('#t').on('click', function(e) {
  if (typeof $(e.target).data('original-title') == 'undefined' &&
     !$(e.target).parents().is('.popover.in')) {
    $('[data-original-title]').popover('hide');
  }
});