How to close a Twitter Bootstrap popover by clicking outside

How to close a Twitter Bootstrap popover by clicking outside

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<a href="#" class="popover_test">Popover Example</a>
<!-- POPOVER -->
<div id="content" class="hidden">
  Contents
</div>
<div id="title" class="hidden">
  Title
</div>

<br>

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

asdasda

CSS

.hidden {
  display: none;
}

JavaScript

$(".popover_test").popover({
    html : true, 
    content: function() {
      return $("#content").html();
    },
    title: function() {
      return $("#title").html();
    }
}).on('click', function(e) {
		$('.popover-content').click(function(e){
    	e.stopPropagation();
    })
    
});




        
$('body').on('click', function (e) {
    $('.popover_test').each(function () {
        //the 'is' for buttons that trigger popups
        //the 'has' for icons within a button that triggers a popup
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover_test').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});