title: Hiding Bootstrap Popover on Click Outside Popover
body: <p>I'm trying to hide the Bootstrap Popover when the user clicks anywhere outside the popover. (I'm really not sure why the creators of Bootstrap decided not to provide this functionality.)</p>
  
  <p>I found the following code <a href="http://www.getallfix.com/2013/03/bootstrap-popover-bootstrap-popover-hide-on-click-bootstrap-popover-hide-on-document-click/">on the web</a> but I really don't understand it.</p>
  
  <pre><code>// Hide popover on click anywhere on the document except itself
  $(document).click(function(e) {
      // Check for click on the popup itself
      $('.popover').click(function() {
          return false; // Do nothing
      });  
      // Clicking on document other than popup then hide the popup
      $('.pop').popover('hide');  
  });
  </code></pre>
  
  <p>The main thing I find confusing is the line <code>$('.popover').click(function() { return false; });</code>. Doesn't this line add an event handler for the click event? How does that prevent the call to <code>popover('hide')</code> that follows from hiding the popover?</p>
  
  <p>And has anyone seen a better technique?</p>
  
  <p><em>Note: I know variations of this question has been asked here before, but the answers to those questions involve code more complex than the code above. So my question is really about the code above</em></p>