title: Bootstrap popover hide on outside click. Opens only on second click
body: <p>Used solutions from other answers to hide Bootstrap popover on outside click.</p>
  
  <p>However it then requires two clicks to open the popover again (if I closed it by clicking outside).</p>
  
  <p>It works alright and opens on first click when I use the button to close it.</p>
  
  <p>Here is problem recreated: <a href="http://codepen.io/olegovk/pen/BjQmQe" rel="nofollow">http://codepen.io/olegovk/pen/BjQmQe</a></p>
  
  <p>The html used:</p>
  
  <pre><code>&lt;!-- Popup button --&gt;
  &lt;a id="menu-button" class="menu-button" data-html="true" role="button" data-container="body" data-toggle="popover" data-placement="bottom"&gt;Menu&lt;/a&gt;
  
  &lt;!-- Popup content --&gt;
  &lt;div id="menu-content"&gt;
    &lt;h1&gt;Hello&lt;/h1&gt;
    &lt;p&gt;Good bye&lt;/p&gt;
    &lt;a href="#"&gt;Link&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the jQuery:</p>
  
  <pre><code>$('#menu-button').popover({
    content: $('#menu-content').html(),
    html: true
  });
  $('html').on('click', function(e) {
    if (typeof $(e.target).data('original-title') == 'undefined' &amp;&amp;
      !$(e.target).parents().is('.popover.in')) {
      $('[data-original-title]').popover('hide');
    }
  });
  </code></pre>
  
  <p>Any ideas why it happens and how to make popup always open on first click?</p>
  
  <p>One note: I find it impossible to use this "official" solution because it makes it impossible to click on links inside popup: <a href="http://getbootstrap.com/javascript/#dismiss-on-next-click" rel="nofollow">http://getbootstrap.com/javascript/#dismiss-on-next-click</a></p>