Pro HTML5 and CSS3 Design Patterns

CHAPTER 20 ■ ALERTS

Tooltip Alert

Problem You want to insert brief, helpful, nonessential tips into your document. You do not want it
to be visible unless the reader moves the mouse over it. You want an unobtrusive way to
show the reader that the tip is present. You also want it to be accessible to nonsighted users.
You do not want to use JavaScript in any way.

Solution You can insert a small image following the text for which you want to supply extra
information. This image signals the presence of a tip. You can put the tip in its title and
alt attributes. A browser automatically displays the title text when the user mouses over
the image, and a screen reader automatically reads the alt text of the image.
If you do not want to use an image, you can style text to signal the presence of a tip. A dotted
underline is the traditional signal that text has extra information. To make the tip
accessible, you can insert a transparent, 1-pixel image with an alt tag set to the tip’s text.

Patterns^

HTML <img class="tooltip-image" src="FILE.EXT"^
title="TOOLTIP TEXT" alt="TOOLTIP TEXT" />
or

TEXT

CSS
.tooltip-image { cursor:help; }
.tooltip { cursor:help; border-bottom:1px dotted; }

Location This pattern works inline.

Limitations Screen readers do not read title attributes, but they do read the alt attributes of images.
That is why this design pattern requires the use of an image, even if you do not want sighted
users to see it.
Tooltips cannot be styled and displayed in tiny text, which can be hard to read. Tooltips are
displayed after a one-second delay, which annoys users in a hurry, but appropriately
prevents tips from popping up when the user unintentionally passes over them with the
mouse. Lastly, tooltips disappear after six seconds, which limits the readable length to a
brief sentence.
Firefox 2 displays only the first 75 characters of the title in a tooltip. Other browsers display
all the text in a title. Newer versions display beyond 75 characters.

Tips The most natural and accessible place to put a tooltip image is after the text for which it
provides help. Screen readers always read the image’s alt text, and if the image cannot be
displayed, a browser displays the alt text. It makes the most sense for the user to read or
hear a tip after reading or hearing the text for which it provides extra information.

Related to Alert, Inline Alert; Inline Elements (Chapter 2); Border (Chapter 6); Image, Replaced Text
(Chapter 14)