jquery creating tooltip

I want to create a tooltip, when user hovers over a link, it shows a tooltip, but does not close on mouseout. It closes only on tooltip area mouseout. In other words, I would be able to hover a link, see a tooltip, navigate to that tooltip with a mouse and do other events inside. Once I mouse out that tooltip (not a link), it closes out. I have a code which shows a tooltip on the link hover, but it hides it as soon as I try to move to that tooltip area. I am using simple live hover method:

 myLink.liv开发者_开发问答e('mouseover mouseout', function (e) { 
     ...show balloon...
 }

how do I make it close on tooltip mouse out, but not myLink mouseout? Thanks

Try this

    myLink.live('mouseover', function (e) { 
         //Code to show the tooltip
         $("toolTipContainerSelector").fadeIn(200);  
    });

$("toolTipContainerSelector").mouseout(function(){
       $(this).hide();
    })

//The below code will take care of hiding the tooltip if you click on the page other than the tooltip. In case you need this please use the below code
    $("body").click(function(){
       if($("toolTipContainerSelector").is(":visible"))
         $("toolTipContainerSelector").hide();
    });

    $("toolTipContainerSelector").click(function(e){
       e.stopPropagation();
    });

Either use an existing jQuery tooltip plugin, or study one of those that you like to see how they handled it. You'll need to deal with event bubbling and keeping track of which areas you want to handle mouseovers and mouseouts in.

Here is slightly different take on your question along with a fiddle: http://jsfiddle.net/SsAY5/3/