title: Twitter Bootstrap Popovers and Tooltips on Listbox Option Elements showing in the wrong place
body: <p>I have setup a quick <a href="http://jsfiddle.net/bmccord/6gezu/2/" rel="nofollow">jsFiddle</a> to demonstrate the problem.</p>
  
  <p>When using either a tooltip or a popover from Bootstrap on an option element of a select list, the popover or tooltip doesn't show next to the item, but rather in the extreme upper left of the page.</p>
  
  <p>The HTML I am using is:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;select size="5" id="testList"&gt;
      &lt;option value="1" rel="popover" data-original-title="This is item 1." data-content="Lots of stuff to say" style="color: red; "&gt;Item 1&lt;/option&gt;
      &lt;option value="2" rel="popover" data-original-title="This is item 2." data-content="Lots of stuff to say" style="color: green; "&gt;Item 2&lt;/option&gt;
      &lt;option value="3" rel="popover" data-original-title="This is item 3." data-content="Lots of stuff to say" style=""&gt;Item 3&lt;/option&gt;
      &lt;option value="4" rel="popover" data-original-title="Blah" data-content="Lots of stuff to say" style="color: orange; "&gt;Item 4&lt;/option&gt;
  &lt;/select&gt;​
  </code></pre>
  
  <p>The javascript call is simple:</p>
  
  <pre class="lang-js prettyprint-override"><code>$(function () {
      $('#testList option[rel=popover]').popover({
          placement: 'right',
          trigger: 'hover'
      });
  });  ​
  </code></pre>
  
  <p>What can I do to make it show up in the right place?</p>