title: Bootstrap popover: hide when cursor moves outside of the window
body: <p>I want to display a popover which contains several buttons when user hovers over a text link</p>
  
  <p>The problem I have is the default Bootstrap popover I'm currently using is dismissed when the cursor from the link which triggered it (e.g. when the user moves to select one of the buttons)</p>
  
  <hr>
  
  <p>This <a href="http://jsfiddle.net/o4o9rrsq/1/" rel="nofollow">jsFiddle</a> is an example of what I tried to do.. The principle is: show popover when the link (<code>#example</code>) is hovered, hide popover when the popover (<code>.popover</code>) is unhovered.</p>
  
  <p>But this doesn't work, although I'm sure that the BS popover is encapsulated in a <code>.popover</code> class (I check with FF dev debug tool).</p>
  
  <p>Funny thing: it works with another div! If I replace</p>
  
  <pre><code>$('.popover').mouseleave(function(){
      $('#example').popover('hide');
  });
  </code></pre>
  
  <p>By this</p>
  
  <pre><code>$('.square').mouseleave(function(){
      $('#example').popover('hide');
  });
  </code></pre>
  
  <p>The popover is indeed hidden when no longer hovering the blue square.</p>
  
  <p>Why doesn't work with <code>.popover</code>?</p>