Menu
For example, consider the following DOM structure.
<a href="#" title="The Anchor">
<img src="http://www.adiumxtras.com/images/thumbs/dango_status_icon_set_7_19047_6248_thumb.png" />
<span>This is a link</span>
</a>
The issue is that hovering over This is a link text doesn't show the tooltip, while hovering over the image does show the tooltip. This issue doesn't occur everywhere i.e. if a page has multiple DOM snippets like above, some show tooltip on hover and some do not. This strange behavior is only in IE8 and IE9 with HTML 4 transitional doctype(IE8 and IE9 running in IE8 and IE9 standards mode respectively.). This issue goes away if I use strict doctype.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Can this be in anyway related to JS? Or is it something else in DOM that could be causing this?
I found similar references to this problem in stackoverflow, but none of them explain the reason why this occurs.
HTML link title atrribute tooltip internet explorer 8
https://stackoverflow.com/a/7901175/1571437
469
Even though the span which is a child of anchor has some minimum height because of the text it holds, the anchor as such doesn't has any height in IE. Because of this, whenever you hover over the text, the tooltip doesn't appear. To verify the same, execute the following code snippet in console
document.getElementById("element's id").offsetHeight // will return 0
This is a bug in IE and workaround would be to do something like following:
a[title] span {
display: inline-block;
}
Just a little mentioning of an IE mystery I just had in this context (IE9 in IE7-mode). My links with title-Tooltips have nested divs in it, and the tooltips show - but not if below there is a spacer-div with "clear:both" in its definition. After I removed the clear from the spacer, the tooltips showed. Before, they did not show in the row above the spacer, but they worked below the spacer. Yeah. Some more hours of experimenting to find an IE workaround.
Of course, a spacer without clear:both does not work very well (FF put it on top of other content above..). Finally it helped to put the title-atts to the inner div instead of the link itself.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
