jQuery: How to disable hover on parent element when hovering over child element?

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 hover开发者_StackOverflow中文版ing over it.

How can I do this?

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.

Looking at your question, you are appending the span to the a. And I think you want something like this? I'm not quite sure because your question isn't super clear.