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

Question

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 the 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 :-)

Answer 1

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>