Question

I have a tooltip function in which I have a mouseout event on 2 elements.
These two elements are child-parent (one into another).

Within this event I need to check if the mouse cursor is outside of both these 2 elements. How can I do this?

Answer 1

Instead of mouseout you can use mouseleave for this:

$("#parentID").mouseleave(function() {
  alert("you have left the parent");
});

Where mouseout fires when entering a child, mouseleave doesn’t, it only fires when leaving the parent element that the event is bound to.

From the docs:

The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant.