Positioning tools on hover using Jquery

Question

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.

I have two questions:

1. Why is my position statement not working?
2. 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.

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

<div class="product"></div>
<div class="product"></div>
<div class="product"></div>
<div class="product"></div>

<div id="product-tool"></div>   

This function is called on document ready:

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();
    })
}

Thank you in advance for any help on this.

Answer 1

edit: no a tooltip wont do because you need to click on the tools.

I would model it from a dropdown replacement plugin, for example: http://www.scottdarby.com/plugins/stylish-select/0.4/

you need to change it so it drops down on hover instead of click.

also, there are much better dropdown replacement plugins out there, that was just the first one i found. Id look around a bit and pick a good one to modify