Jquery tooltip creates tooltip for Child elements

Question

I have an LI with A tag in it.

<li title="LI TEXT" id="test">
   ELEMENT WITH HREF <a href="#" title="HREF TEXT">HREF</a>
</li>

I want to create jquery tooltip for the LI and default tooltip for its child elements. But this does it both for the jquery elements for LI and its childs.

$("#test").tooltip();

http://jsfiddle.net/k45emuhg/

Answer 1

Okay, what you've described is quite easy with the items option. Simply include a selector restriction for the items you want to show their tooltips, e.g. the same as the original selector that you're calling .tooltip() on:

$("#test").tooltip({items: "#test"});

The question doesn't make this explicit, but you probably also want to show only one (rather than 2) tooltips when you hover over the children element. To do that, you can disable and reenable the parent's tooltip on the mouseenter and mouseleave events. JQuery provides a nice shortcut for that with the hover function:

$("#test a").hover(function() {
    $(this).parent().tooltip("disable");
}, function() {
    $(this).parent().tooltip("enable");
});

Note that you can use any relevant selector, not necessarily $(this).parent(), depends on how your HTML is structured

Here's the example fiddle updated: http://jsfiddle.net/957r8x51/