Tooltip on anchor's title not shown in IE9

Question

Has something was changed in the way IE9 treats the title attribute in an anchor tag? I try to use a regular anchor, such as -

<a href="http://www.somelink.com" title="Some title here">This is a link</a>

A tooltip should be with the title is expected to appear, and it does appear in previous versions of IE and also in other browsers, but not on IE9. Is there a know issue with that? I tried to search the web for that, but found nothing about this. Any ideas? Thanks

Answer 1

I have found a good work-around, Place your title in an abbr tag. I've tested this in Safari, Chrome, IE9, and Firefox. It works in all of them.

Answer 2

The code for the href link above works fine in IE9. Which leads me to believe something else on the page is causing the issue. Have you tried validating your html? http://validator.w3.org/

It could be that there's something else broken that the other browsers are just looking past. Perhaps it's nested in such a way that's causing IE9 to overlook the tag.

Answer 3

I had a typical scenario wherein we had to show a image with tooltip. The image was inside a Iframe and tooltips were not being displayed, when opened in a Browser with IE 10 Compat Mode.

The alt tag helped me out. The solution was to set the images alt tag.

<A onclick=navigate() title="Did not work" href="javascript:void(0);" height="" width="">
  <IMG alt="This worked" src="http://img.webmd.com/dtmcms/live/webmd/consumer_assets/site_images/icons/imageviewer_back_button.gif">
</A>

Answer 4

I have encountered this problem in a few applications I've worked on.

I've found it doesn't work if you have nested elements within the element with the title.

The example below doesn't show its title in IE9 for me:

<a href="test.html" title="test tooltip"><span>test link</span></a>

However, this example does work:

<a href="test.html" title="test tooltip">test link</a>

That is with an XHTML 1.0 Transitional doctype and Browser Mode: IE9 and Document Mode: IE9 Standards.

Obviously your example doesn't have a nested element but thought it might be relevant to some people who find this post based on the title.

You can overcome this limitation in IE by specifying the nested element to be an inline-block:

a span {
    display: inline-block;
}

Answer 5

A workaround is to put at least one character outside the inner tags:

<a href="#" title="Tooltip"><font color="blue">This does not work</font></a>
<a href="#" title="Tooltip"><font color="blue">This</font> <font color="blue">does work</font></a>