jquery creating tooltip

Question

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.live('mouseover mouseout', function (e) { 
     ...show balloon...
 }

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

ShankarSangoli · Accepted Answer · 2011-07-22 21:14:57Z

1

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

edited Jul 22, 2011 at 21:14

answered Jul 22, 2011 at 20:53

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stewie Griffin Over a year ago

in the fist method, where I display my mouseover effect, is it possible to add .fadeIn() or similar effects? how?

Shawn Steward · Accepted Answer · 2011-07-22 20:43:09Z

0

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.

answered Jul 22, 2011 at 20:43

Shawn Steward

6,8353 gold badges29 silver badges46 bronze badges

1 Comment

Stewie Griffin Over a year ago

I dont wanna use existing ones. I am interested in implementation, not tooltip itself

Jesse · Accepted Answer · 2011-07-22 21:23:51Z

0

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

answered Jul 22, 2011 at 21:23

Jesse

8,4236 gold badges55 silver badges82 bronze badges

Collectives™ on Stack Overflow

jquery creating tooltip

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related