Tooltip on anchor's title not shown in IE9

2020-03-02 04:29发布

问题:

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

回答1:

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.



回答2:

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;
}


回答3:

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.



回答4:

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>


回答5:

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>