HTML: stop Child elements from inheriting parent's [title] attribute

The issue is that when I declare a title attribute for a 'wrapper' element, the a tool-tip shows up when the cursor falls inside the 'content' element as well. How do I prevent this(inheritance) from happening?

<style> 
  #content{ margin:25px;}
</style>

<div id='wrapper' title='example'>
  <div id='content'>

  </div>
</div>

(I only want the tool-tip to show up between the edges 开发者_如何学Pythonof the 'content' and 'wrapper' elements, instead of in both)

I don't think this is possible with pure CSS or HTML.

One way to hack this is using client side code.. basic plain JavaScript example:

window.onload = function() {
    var oDiv = document.getElementById("content");
    oDiv.onmouseover = function() {
        this.parentNode.setAttribute("old_title", this.parentNode.title);
        this.parentNode.title = "";
    };
    oDiv.onmouseout = function() {
        this.parentNode.title = this.parentNode.getAttribute("old_title");
    };    
};

This will "clear" the parent div title upon mouse over of the contents, and restore the title when the mouse leave the contents.

Live test case: http://jsfiddle.net/UASPZ/

I had the same problem. I found out that you can prevent this by giving the child elements a dummy title title=" ".

Same problem here.

Found out that specifying title=' ' works for Chrome and FireFox but shows annoying tool-tip with one space in IE. title='' works for IE but completely ignored by Chrome and FireFox thus showing parent's tool-tip.

Didn't figured out how to make in cross-browser :(

This is now possible, as explained on MDN

Title attribute inheritance

If an element has no title attribute, then it inherits it from its parent node, which in turn may inherit it from its parent, and so on.

If this attribute is set to the empty string, it means its ancestors' titles are irrelevant and shouldn't be used in the tooltip for this element.

This creates the following solution for your problem:

<div id='wrapper' title='example'>
  <div id='content' title=''>

  </div>
</div>

I have confirmed that this works in Firefox and Chrome.