Question

I need to know how to fix this problem. I have a mouseleave event on my list.

jQuery(".list").live("mouseleave", function(event) {

    alert("Boom");

});

But at the same time I have a tooltip displayed over it. This tooltip doesn’t belong to this list, it is in other div.

Now, when i move mouse over that div, i get an alert – i left the list.

Please, tell me how i can do that when i move mouse in this tooltip, there will be no action.

I’ve tried this sentence, but it doesn’t work:

if($(event.target).hasClass('name')) alert("D");

Answer 1

You could use the relatedTarget property from the mouseleave event, this contains an object of the element which the mouse was over at the time the mouseleave event fired:

jQuery('.list').bind('mouseleave', function(event) {
  if(jQuery(event.relatedTarget).attr('id') != 'yourToolTipId') {
    alert("Boom");
  }
});