title: Bootstrap popover to appear on hover and remain for a second
body: <p>I would like a popover to appear on hover, but to remain only if the user is interacting with it (it contains links) if not, it should disappear after 500ms.</p>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(document).ready(function(){
      $('[data-toggle="tooltip"]').popover({ title: 'Look! A bird!', html:true, delay: { show: 100, hide: 1000 } });
  });
  </code></pre>
  
  <p><strong>PHP</strong></p>
  
  <pre><code>&lt;button type="button" class="badge btn btn-default" data-trigger="click" data-toggle="tooltip" data-placement="top" data-html=true data-content="@foreach($tag-&gt;tracks as $track) &lt;a href='/tracks/{{ $track-&gt;mdbid }}'&gt;{{ $track-&gt;title }}&lt;/a&gt; @endforeach"&gt;{{ $tag-&gt;tracks-&gt;count() }}&lt;/button&gt;
  </code></pre>
  
  <p>Ignore the funny code inside the brackets (It is Laravel blade syntax) </p>
  
  <p><strong>JSFiddle</strong></p>
  
  <p>I have created this <a href="http://jsfiddle.net/WP2xf/1/" rel="nofollow">JSFiddle</a> although it doesn't work properly (it does on my machine). I have got the delay working. However, if the mouse is within the popover, it still disappears. How can I prevent this and make it only disappear when the mouse it outside the popover?</p>