title: keep bootstrap popover inside viewport
body: <p>I am trying to create a menu using a sidebar with buttons, each one with an assigned popover containing the relevant data.
  Unfortunately, one of the popovers might contain an arbitrary number of rows and in some cases it might be partially outside the viewport.</p>
  
  <p>See <a href="http://jsfiddle.net/bfd9f/1/" rel="noreferrer">http://jsfiddle.net/bfd9f/1/</a> for an example of the issue (click the "Tasks" button)</p>
  
  <p>I thought I could programmatically alter the popover's top to a defined value, when negative (i.e. outside the viewport) and to do this, I already managed to get a reference to the first div of the popover while listening to the <code>show.bs.popover</code> event.
  Unfortunately, I think due to the fact that it's not rendered yet, it appears to have a size of (23, 107) while it should be something like (300, xxx) and a position of (0, 0).</p>
  
  <p>Is there a way to solve this issue? maybe rendering the popover offscreen first to measure it? if so, how would I do that?</p>
  
  <p>Thanks</p>