Parent tooltip should override child tooltip

Consider this HTML:

<div title="parent tooltip">
 <a title="child tooltip">child</a>
 <a title="child tooltip 2">child 2</a>
</div>

When you hover over a child, the child's tooltip will appear. When you hover over the dead space around the children, but inside the parent, the parent's tooltip will appear. How do I make it so that the parent's tooltip shows everywhere?

The brute force solution is to use JS to remove all the child tooltips whenever the parent has its title set. And JS would put back the tooltips when the parent has its title removed. This would be excessive processing for large documents, so I was hoping for a more efficient solution.

Why am I doing this? I have a JS function to disable an entire element. It basically adds a class to the element, making it appear faded out and makes it have a no-drop cursor. When you hover over a disabled element, the tooltip reads "you cannot use this ... blah blah". It would be strange if a child element triggers its tooltip. The child could say something like "click here to execute this" - which would be a bad user experience开发者_运维技巧 because the parent is disabled.

function disable(element) {
 element.writeAttribute('title', 'you cannot use this');
 element.addClassName('disabled');
}

function enable(element) {
 element.writeAttribute('title', null);
 element.removeClassName('disabled');
}

You've got HTML markup that's basically explicitly telling the browser to do exactly what you observe it to do. The only thing you can do is apply JavaScript to get rid of the "title" attributes of problematic elements, or (better) don't put title attributes on elements in the first place when you don't want title text to show up.

I've had this situation happen to me, as follows. In my web app, I've got a little "What's this?" feature, involving little "[?]" icons that show up near things that may need explanation. You click the little icon and a "help bubble" pops up. It's a pretty common feature. Anyway, the little clickable thingy is implemented as a <div> that's absolutely positioned, and the "bubble" is lexically nested inside that with "position: relative". The clickable icon has its own "title" attribute, but of course when the help bubble is showing I don't want that title to show up as flyover text, because it's just weird. Thus, my JavaScript code that opens the bubble has to stash the "title" attribute of parent elements in jQuery ".data()" storage while the bubbles are open, and it restores the titles when the bubbles close.