How to solve this hover out issue
<p>I am trying to apply a hover in and hover out effect on a button and a div will popup above the hovered button. The popup div will disappear if user hover out of the button.</p>

<p>My problem is that when the popup div pops and the button's hover out event will kick in because the popup div is hovered at the moment.</p>

<pre><code>$('.helpImg').hover(function(){
    $(this).css({'cursor': 'pointer'});
    tooltip = $(this).next().attr('id');
    $('#tool').show(150);
}, function (){
    $(this).css({'cursor': 'auto'});
    $('#tool').hide(50);
})
</code></pre>

<p>the #tool div will hide right after I click the button becasue the div is above the button and it's considered 'hover out'</p>

<p>Anyway to solve this?? Thanks .</p>

<p><strong>Updated Code</strong></p>

<pre><code>   $('.helpImg').hover(function(){
            $(this).css({'cursor': 'pointer'});
            toolid=$(this).next().attr('id');
            $('#tooltip-' + toolid).show(150);
        },function (){
            $('#toolip-' + toolid).hide(150);
        })
</code></pre>

<p>I can't hardcode my popup <code>div</code> because I don't know the ID unless I hover my <code>helpImg</code> element. </p>
