Difference between Screen Tips and alt attribute

Many designers and users are confused about the difference between a screen tip/ tooltip and the alt attribute.

A Screen Tip or Tool Tip gives some description about a link, menu or an item. Whereas an alt attribute is used for accessibility for those users who do not have the ability to view images or for those who use screen readers and also for those whose images are turned off/not displayed.

In non-standards compliant browsers like IE 6, the alt attribute was implemented incorrectly. So when a user hovered over an image (with alt attribute defined), he would see a screen tip. This caused confusion among many designers. But standards compliant browsers like Firefox, Opera, Safari and now IE 8 correctly implement the alt attribute.

So to add a screen tip, use the title attribute as shown in the code below:

<img src=”maroon_leaves.jpg” alt=”leaves” title=”Maroon leaves”/>


The output of the above example can be seen in this image. On mouse over what is displayed is the screen tip (content of the title attribute) and not the content of alt attribute.

NOTE: The title attribute will be rendered with or without the alt attribute.

Filed Under: CSS Hacks, Tips and TricksExpression Web


About the Author: Minal is a freelance web and graphics designer. She specializes in designing Logos, Stationery, Graphics and Icons as well as website templates using graphical tools like Photoshop, Illustrator and Expression Web. Twitter @saffronstroke

RSSComments (2)

Leave a Reply | Trackback URL

  1. Tricia says:

    yet when I mouse over the image, the style attribute “image” appears. So should style be used or is it superfluous?

Leave a Reply