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

Question

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 of the 'content' and 'wrapper' elements, instead of in both)

Answer 1

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 :(

Answer 2

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

Answer 3

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/