Question

I am currently using the tipsy plugin for jquery to display lightweight tooltips. Works great, for non-nested elements.

Lets say I have:

<span>
    abc
    <span>def</span>
    ghi
</span>

and I have a hoverevent on each span tag, I get weird result when I try to hover over the inner span tag. I only want it to display the actually hovered element. Nothing else.

How can I do this?

Answer 1

I used gion_13s solution for a while. But it turns out to be very demanding on the browser/cpu on larger sets of data. I came up with a better solution, based on his code:

    $('body').on('mousemove', '.backref_hover', function(e){
    // prevent the event from bubbling up
    e.stopPropagation();
    e.stopImmediatePropagation();

    // force a hide on other targeted elements (such as the span parent)
    $(this).parent().children('.backref_hover').not(this).trigger('mouseleave');

    // force a show on this element (such as thespan parent)
    $(this).tipsy('show');
});