title: Bootstrap popovers for table row hover: Not possible to click link inside popover
body: <p>I have table rows where I display additional information in a twitter bootstrap popover.</p>
  
  <p>A few notes from the interaction design I work with:</p>
  
  <ul>
  <li>Popovers must show up when you hover the row</li>
  <li>Popovers will contain 1 or more links</li>
  </ul>
  
  <p>Now, the link part is the hard part. If you move the mouse from the table row, to the popover (which contains the link), the <strong>popover will disappear</strong>!</p>
  
  <p>I am creating the the popover with this code:</p>
  
  <pre><code>var options = {placement: 'bottom', trigger: 'hover', html: true};
  $(this).popover()
  </code></pre>
  
  <p>-- which assumes relevant html including the link is generated and put in <code>data-content</code> attribute</p>
  
  <p>Notice this <code>{placement: 'bottom' }</code>. In order to make it possible to move the mouse to the popover, I tried <code>{placement: 'in bottom'}</code> (added <strong><code>in</code></strong> keyword, which generates popover dom element inside the selector).</p>
  
  <p>Problem is for table rows, that is not really legal HTML-wise. Perhaps that's why <code>placement: 'in bottom'</code> renders even more ugly: The popover glues to the top of my viewport.</p>
  
  <p>Try my demo in <a href="http://jsfiddle.net/h563Z/2/">My example on JSFiddle</a> </p>
  
  <p>It contains the examples ... </p>
  
  <p>My question is how should I define my popover, so that it is possible to click the links -- given the limitations set by the interaction design?</p>