ALT and TITLE.

Its funny how mistakes can sometimes become so used they are classified as right way of doing things.

At this time many, many people believe using ALT tags for images and TITLE tags for text is the right way to go to display tooltips. This method was adopted years ago, Netscape 4.x first made the mistake of displaying ALT as a tooltip so Internet Explorer followed.

You should not use ALT tags for displaying tooltips on images. The ALT tag is used for replacement text for browsers that cannot display images, or if the user has disabled images within the browser itself. The replacement text usually gives a description of what the image is about so even if the image is disabled the user can still obtain information about the image.

The TITLE tag is used for tooltip descriptions when the user can see images but would still like read the tooltip. If a TITLE tag is not added to the IMG tag the ALT will not show up in browsers which have fixed this issue.

The wrong way of displaying a tooltip:

<img src="http://yourimage.gif" alt="This is not the correct way" />

The right way of displaying a tooltip:

<img src="http://yourimage.gif" alt="Text displayed when image isn't available" title="The correct way of displaying a tooltip on an image" />

If you can't get your head around it, have a look at the following image. It displays both ALT text and TITLE text. You can access these properties by right-clicking any image and selecting Properties. (Only in certain browsers like Mozilla.)

Now you know, you will have to go through and fix your IMG tags to contain the TITLE tag to fix your tooltips and alternative text.