Positioning tools on hover using Jquery
<p>In a page with n divs of the same class, I want to have buttons appear relative to an element when the cursor hovers over it.  This code is not working - right now, the result is that the hidden div with the tools is shown and hidden when any element is hovered, but it never moves.  I am not getting errors in the Google console when it executes in Chrome.</p>

<p>I have two questions:</p>

<ol>
<li>Why is my position statement not working?</li>
<li>What is the best way to keep the tools up when the cursor goes to them, since that would be outside the original element and therefore would trigger the hide. </li>
</ol>

<p>This simplified HTML is as follows and the last div has position: absolute in the CSS:</p>

<pre><code>&lt;div class="product"&gt;&lt;/div&gt;
&lt;div class="product"&gt;&lt;/div&gt;
&lt;div class="product"&gt;&lt;/div&gt;
&lt;div class="product"&gt;&lt;/div&gt;

&lt;div id="product-tool"&gt;&lt;/div&gt;   
</code></pre>

<p>This function is called on document ready:</p>

<pre><code>function ProductToolHover() {
    $('.product').hover(function () {
        var product = $(this);
        $('#product-tool').position({of: product, my: 'left top', at: 'right center'});
        $('#product-tool').show();
    },
    function () {
        $('#product-tool').hide();
    })
}
</code></pre>

<p>Thank you in advance for any help on this.</p>
