Jquery hover seems erratic
<p>I would like to have a twitter bootstrap style popover appear next to a div whenever the mouse enters the div and disappear whenever the mouse exits the div. </p>

<p>I have the following in my  section:</p>

<pre><code>$('#bizhover').hover(
   function() {
     $(this).popover({ html: true, placement: "right" }); 
   },
   function() {
     $(this).popover('hide');
   }
);
</code></pre>

<p>I believe things may be complicated somewhat by my use of a "chosen" (jquery plugin) style dropdown menu placed into the div as below:</p>

<p><img src="http://i.stack.imgur.com/kbTjF.png" alt="enter image description here"></p>

<p>The code to create that is something like:</p>

<pre><code>&lt;div id = 'bizhover', style = 'margin-right:85px;', class = 'pop_html', title = 'Instructions', data-content = "blah blah blah"&gt; CHOSEN DROP DOWN &lt;/div&gt;
</code></pre>

<p>I notice that if my mouse exits to the top of the drop down the pop-over remains. If I move my mouse below or out to the sides the pop-over disappears, as intended.</p>

<p>Any advice would be greatly appreciated. </p>
