CODEWITHSUNDEEP
javascriptjquery
Zhivago
Zhivago

Reputation: 189

How check mouseover on two elements ?

I need hide tooltip on mouseout of link, BUT not if mouseover on tooltip (both have different parents) For example: we can see it on Facebook when hover on names or avatars friends

I try this but every time i get FALSE 

$('a').bind('mouseleave', function () {   
      var i = $('div.tooltip').is('hover');
      if(i===true){
      console.log('cursor over the tooltip, so dont hide');
      }
      else{
      console.log('hide tooltip');
      }   
});

How i can check both condition?

Upvotes: 0

Views: 1614

Answers (2)

adeneo
adeneo

Reputation: 318192

If you can't change your markup, use a timed event and abort it when the mouse enter either element, like so:

var timer;

$("a, .tooltip").mouseleave(function() {
    timer = setTimeout(doSomething, 10);
}).mouseenter(function() {
    clearTimeout(timer);
});

function doSomething() {
    console.log('hide tooltip');
}

Here's a FIDDLE

Upvotes: 1

Mikey G
Mikey G

Reputation: 3491

Put both the link and the tool tip in the same parent:

<div id="parent">
    <a href="link.com">link</a>
    <div id="tooltip">tooltip</div>
</div>

And then in the script you can just put the mouseleave function on the parent:

$("#parent a").mouseenter(function(){
   $("#tooltip").css("display","block"); //or however you handle this
});
$("#parent").mouseleave(function(){
   $("#tooltip").css("display","none");
});

Upvotes: 1

Related Questions