Question

I have a div with a form inside it. The form is small, consists of one or two dropdown/textboxes. I’m wondering what would be required to do the following:

• when I click on a link, a tooltip pops up with the form in it. It appears over top of the link that I clicked so that when it appears the mouse is over top of it.
• when the mouse exits the bounds of the tooltip, it disappears.

Doing some googling, all of the tooltip examples I found appear upon hovering over a given area. All the jQuery popup examples I seen are modal and force the user to explicitly close it.

Does anyone know of a way that I can have a tooltip work as described above?

Answer 1

If you can’t find a plugin that works, what you described is pretty straight forward to implement.

You just have to bind a mousemove event to the document and check to see if its target or its target’s parents are your tooltip.

This example is for a trigger button that is right next to the tooltip, but it might work for having it directly over the trigger as the trigger then wouldn’t be hovered.

$("#trigger").hover(function () {
    // move the tool tip div into place
    // show the tool tip
}, function () {    
    $(document).bind('mousemove.tooltip', function (e)
    {
        if (e.target.id !== 'tooltip' && $(e.target).parents('#tooltip').length === 0)
        {
            // close tooltip
            $("#tooltip").hide();
            $(document).unbind('mousemove.tooltip');
        }
    });
});

Here is a rudimentary fiddle that works as described:

http://jsfiddle.net/5h3Zy/5/