Prevent "title" attribute of parent element from causing a browser flyover

The good browsers all work such that an empty "title" attribute for an element means, "don't bother to show a title flyover here". That makes sense, as a little white flyover with nothing in it (edit — or nothing but a space character) is, for most people, completely useless.

The designers of IE do not agree.

My problem is that I've got a little "what's this?" mechanism on a site that involves an absolutely-positioned <div> containing a little graphic of a question mark. That <div> has a "title" attribute with a question like, "What does the 'History Eraser Button' do?" When you click on the question mark, a little "Help" bubble pops out and you can read about the topic. The idea of the "title" is that if the user mouses over t开发者_Go百科he question mark, they see a question that's (hopefully) one they might be wondering about.

Well the problem with the "title" is that the pop-out "help" balloon is inside the absolutely-positioned <div> so that it is correctly situated on the page. In other words, the absolutely-positioned <div> just has "position: absolute", but it's allowed to be dropped on the page in the "right" place without any offset computation. The "help" balloon is thus in the right place sort-of automatically. But: that "title" on the parent <div> is pesky because the browser pops it up after the balloon is open. Why? because the "help" balloon is lexically contained in the outer <div>, even though the outer <div> is just a little bitty thing with a question mark in it.

Thus solution #1 was to give the "help" balloon <div> its own "title" attribute, with nothing in it (edit — I got that wrong; it's not nothing in the title, it's a space character). That works great, except in IE. In IE now, that empty "title" attribute causes the browser to put up a little blank rectangle. Helpful.

I could of course fiddle with the Javascript and just nuke the "title" attribute off the parent <div> while the balloon is showing, but I'm curious about possible ways to "override" the parent element "title" in IE that can be done with nothing but markup. If it's not possible, then oh well.

Simple demo page: http://gutfullofbeer.net/title.html (try it with IE 7 or 8 to see the little empty white box)

edit — ha ha ha - when I change my code so that I explicitly null out the "title" attributes on all the parent elements, IE shows a flyover with the word "null" in it :-)

Why not assign the title to the question mark element (#qmark) instead of the containing div? So instead of:

<div title="this is the overlapping title">  
    <div id="qmark">?</div>
    <div id="hiddenContainer"></div>
</div>  

it would be

<div>
    <div id="qmark" title="this title no longer overlaps">?</div> 
    <div id="hiddenContainer"></div>
</div>

I don't think you can do what you want. It seems like a hack anyway -- child DOM element attributes aren't meant to "override" parent attributes. You should probably wrap the specific text with the correct title, such as this:

http://jsbin.com/ezipe

I ended up augmenting my existing code that opens/closes the "help" bubble so that it runs up the chain of parent elements and stashes the "title" code with the jQuery "data" facility. When the bubble closes, the titles are restored.