Unwanted Tool Tips in Internet Explorer

The image (IMG) tag has an attribute, the ALT attribute, that displays alternative text in the event that the image is not shown, e.g. in the case of screen readers or where image downloads are blocked. This attribute is important in maintaining accessibility for your pages, and is mandatory if you want to your pages to validate as (X)HTML.

The problem with Internet Explorer (Windows)

All browsers honour the replacement of images with the ALT text, but Internet Explorer on Windows goes one step further. If you place your mouse over an image, the ALT text will show up as a ‘tool tip’.

It may be desirable, in some cases, to have a tool tip. But ALT text is rarely suitable if it's used for its designed purpose, that is to describe a missing image.

Furthermore, in most cases, these ‘tool tips’ actually get in the way, either obscuring design elements, distractingly flashing on and off (e.g. in navigation menus), or simply destroying the look and feel of a design.

Finally, if a tool tip for an element is desired, the ALT attribute is not appropriate because all other browsers will fail to render it.

A solution, of sorts

The appropriate attribute for displaying tool tips is the TITLE attribute, which is displayed by all graphical browsers and overrides the display of the ALT attribute text by Internet Explorer.

Thus, in cases where ALT text is specified and there is no TITLE attribute, Internet Explorer will use the former, but where both are specified it will use the latter. Therefore, one way of preventing unwanted tool tips is to specify an empty TITLE:

<img src="image.jpg" alt="descriptive text of the image for those who cannot see it" title="">

This solution is effective, but adds ‘empty’ code to pages. By that I mean non-semantic code added solely to get around a browser quirk.

It also raises a problem of its own, because Internet Explorer has another quirk. The text assigned to the TITLE of an image, or to the ALT in the absence of a TITLE, overrides any TITLE of the parent element (e.g. a hypertext link.) Furthermore, if the image's TITLE is set to an empty string, the parent element's TITLE is not rendered. This is also true for Safari (v2), but not Firefox (v1.5, Mac and Windows), Opera (v8.5, Mac), or Internet Explorer for Mac (v5.2.3).

Another solution!

In order to address this problem, I looked at how blank TITLE text could be applied outside the HTML mark up.

function RemoveAltTooltips() { if (document.images && navigator.user_agent.indexOf('MSIE') != -1) { var i, imgs = document.images; if (imgs.length > 0 && imgs[0].getAttribute) { for (i = 0; i < imgs.length; i++) { if (imgs[i].getAttribute('alt') != '' && imgs[i].getAttribute('title') == '') imgs[i].setAttribute('title',''); if (imgs[i].parentNode.getAttribute('title') != '') imgs[i].setAttribute('title',imgs[i].parentNode.getAttribute('title')); } } } }

The script first checks that the browser supports images (document.images) and that it is, or claims to be, Internet Explorer (alternatively, the function could be called from, or defined within, a conditional comment.) A check is made to ensure that the browser supports the getAttribute() method, which was introduced to Internet Explorer in version 4.

It then cycles through the images on the page. For each image that has ALT text specified, but no TITLE attribute, it sets the TITLE to be blank.

Finally, the script ensures that if the parent element has a TITLE attribute it's not overriden, by assigning its value to the IMG tag's TITLE.

The script in action

The three images below all have an ALT attribute applied to the IMG tag. The second image also has a TITLE attribute applied to it. The third image is within a hypertext link to which a TITLE attribute is applied. The purpose is to demonstrate that the script will override Internet Explorer's substitution of ALT text in place of absent TITLE text, but will honour the TITLE attribute applied to an image or parent element. Holding the mouse over the images should result in no tool tip for the first, a tool tip that states ‘the pencil’ for the second, and one which states ‘follow me to the home page’ for the third.

image of pencil image of pencil image of pencil

Another test is presented here, this time evaluating the effect on parent element TITLE attributes under different conditions. The three images each lie within a hyperlink. Each image has an ALT attribute (‘this is image ALT text’) and each link has a TITLE attribute (‘this is link TITLE text’).

  1. IMG has no TITLE attribute
  2. IMG has an empty TITLE attribute
  3. IMG has no TITLE attribute, but the script is applied

These give the following results in Internet Explorer:

  1. Image ALT displayed as a tool tip (incorrect, image ALT overrides link TITLE)
  2. No tool tip displayed (incorrect, image TITLE overrides link TITLE)
  3. Link TITLE displayed as a tool tip (correct, and is the case with other browsers)

Conclusion

Internet Explorer's rendering of the ALT as a tool tip for page elements is incorrect. It can be overridden by applying an empty TITLE attribute to the element, but this increases code in the document, overrides the TITLE attribute of the parent element, and must be applied to every element affected.

A solution is presented that circumvents these problems by:

  1. being applied through generic DOM techniques, so that no additional code is needed in the mark up;
  2. can be applied to all affected elements across a site (if loaded within a ‘script library’ and called during window.onload); and
  3. preserves the TITLE text of the parent element.

I have not written the script to check for TITLE attributes in higher levels of nesting (i.e. beyond an element's immediate parent). I don't know how much that is just a theoretical problem rather than a real one, but the script could readily be adapted in this regard.