jQuery - use .hover instead of .click
<p>I have the following code on my page.</p>

<p><a href="http://jsfiddle.net/SO_AMK/r7ZDm/" rel="nofollow">http://jsfiddle.net/SO_AMK/r7ZDm/</a></p>

<p>As you see it's a list of links, and every time a link is clicked, the popup box opens up right underneath the link in question.</p>

<p>Now, what I need to do is basically the same, except I need to use the .hover event and delay the execution by 2 seconds. So instead of clicking, the user should keep the cursor over a link for 2 seconds.</p>

<p>Sounds simple enough but I can't get the positioning to work properly. here's what I tried:</p>

<pre><code>$('a.showreranks').hover(function()
    {   
    $(this).data('timeout', window.setTimeout(function()
        {
            position = $(this).position();   
        $('#rerank_details').css('top', position.top + 17);   
        $('#rerank_details').slideToggle(300);    
        }, 2000));
    },
    function()
    {
        clearTimeout($(this).data('timeout'));
    });
</code></pre>

<p>Can someone modify this to make it work?</p>
