Question

So I have some HTML like this:

<a class="tooltip" title="my tool tip">
    Hover over me for a tool tip!
</a>

the javascript changes the html into something like this:

<a class="tooltip">
    Hover over me for a tool tip!
    <span style="position:absolute; display:none;">my tool tip</span>
</a>

When hovering over the parent element, the javascript triggers the child element to display. The child element is positioned so that it looks like it is not inside the parent element, so hovering over the child element still causes the child element to be displayed. I want to only show the child element when you are not hovering over it.

How can I do this?

Answer 1

Use event delegation:

$('.tooltip').hover(function(e){
    if($(e.target).is('span')){
        // your child span is being hovered over
        e.stopPropagation();
    }else if($(e.target).is('.tooltip')){
        // your parent element is being hovered over
    }
});

Though, as noted in the comments to your post, you can’t hover over something with display: none as a style property.