Dismiss Bootstrap Popover by Clicking outside

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>

<br><br><br><br><br><br><br><br><br>

<a href="#">Hi</a>

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  **************/

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