Using jQuery for tooltips

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?

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/

If you want to use jquery UI plugin use a dialog and a function such as the following:

$("#yourDialog").dialog({ autoOpen: false });

$("#yourLink").click(function(){
      $("#yourDialog").open();
});

$("#yourDialog").mouseover(function() {
  }).mouseout(function(){
    $(this).close();  
});

Well i Creted something that i guess was what you where after take a look

http://jsfiddle.net/hDcac/1/

The code got kinda messy but you shuld get the idea. :)

<script type="text/javascript">
$(document).ready(function () {
    $('#mylink').hover(function () {
        $('#mytooltip').stop(true, true).fadeIn();
    }, function () {
        $('#mytooltip').fadeOut();
    });
    $('#mytooltip').hover(function () {
        $('#mytooltip').stop(true, true).fadeIn();
    }, function () {
        $('#mytooltip').fadeOut();
    });
})
</script>
<div id="mylink">My Link</div>
<div id="mytooltip'">My Form</div>

This puts a "hover" event on each element. Anytime your mouse is over either element, it calls "stop(true,true)" which prevents the fadeOut from occuring. Once the mouse leaves the elements, the tooltip fades.