title: Bootstrap 3 Popover arrow and box positioning
body: <p>I am using <code>Bootstrap 3</code> popovers to display information about a link on hover, before clicking the link.</p>
  
  <p>It's currently working at the moment, however, The links are displayed from a dropdown menu at the top of the page. </p>
  
  <p>When the first link has a lot of information about it, the top of the popover disappears at the top of the page, so you cannot see the content of it. </p>
  
  <p>I am trying to make it so that the popover arrow appears at the top-left of the popover(as opposed to middle-left which it is doing now) and the top of the popover box is level with the arrow if that makes sense.</p>
  
  <pre><code>$('.popOver').popover({
      trigger: 'hover',
      html: true
  });
  </code></pre>
  
  <p>This above is working fine but I don't believe any popover options are able to help me here. Its the CSS I need to change but it's rather extensive to post, so I was just looking for someone with knowledge of bootstrap to point me in the right direction.<br/></p>