Defining Cross-Browser Tooltips
Summary: Authors are used to having alt text appear as a "tooltip" above images, but that's not how it was meant to be used. Learn how to define "tooltips" in a cross-browser, standards-friendly way. Authors are used to using the
alt attribute to create "tooltips" in Web browsers. The classic example is a "tooltip" of an image; when the user pauses the mouse pointer over an image, the contents of the
alt attribute are displayed as a "tooltip." Gecko-based browsers such as Mozilla, Netscape 6+, and Compuserve 7 do not support this behavior. See bug 25537 for a lengthy, sometimes passionate discussion of Gecko's behavior in this regard.
According to the HTML 4.01 definition of the
alt= text CS
- For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the
In other words,
alt text should only be displayed when a user agent cannot display the primary content of the element (e.g., a text-mode browser that cannot display images). In a visual browser, the image should be displayed and the
alt text should not. This assumes that the browser can find the image and that it supports the image format used; if either of these is not true, and the image cannot be displayed, then the
alt text should be displayed in place of the missing image.
On the other hand, the HTML 4.01 definition of the
title attribute states:
title= text CS
- This attribute offers advisory information about the element for which it is set.
TITLEelement, which provides information about an entire document and may only appear once, the
titleattribute may annotate any number of elements. Please consult an element's definition to verify that it supports this attribute... Values of the
titleattribute may be rendered by user agents in a variety of ways. For instance, visual browsers frequently display the title as a "tool tip" (a short message that appears when the pointing device pauses over an object).
Between these two passages, it is fairly clear that the proper method for defining a "tooltip" for an image (or, indeed, for any element) is to use the
The most obvious solution is to use the
title attributes for their intended purposes, instead of adhering to their historical misuses. A quick check of various user agents showed that
title attribute contents were displayed as a "tooltip" in:
- Gecko-based browsers (Mozilla Firefox, Netscape 6+, etc.)
- Internet Explorer 5.5+/Win
- Internet Explorer 5.x/Mac
- Opera 6.x+
Of these, only IE/Win treated
alt text as a "tooltip"; the other browsers did not reproduce this behavior. Authors who are faced with the prospect of editing a large collection of legacy documents should be able to convert their documents using a batch find-and-replace operation, for example substituting
If such a find-and-replace operation is somehow not feasible, authors with the ability to run proxy servers can use the approach proposed by Christian Jensen (cf. bug 25537#c73, which is to run a proxy server that rewrites HTML source on the fly, as it is sent to the user. In this approach, the server checks outgoing HTML for elements that have an
alt attribute but no
title attribute, and inserts a
title attribute with the same content as the
alt attribute. A variant on Christian's original suggestion was made by "CT" in bug 25537. A similar solution can be employed for Web servers that are based on content management systems, including Microsoft's Active Server Pages, which make such substitutions fairly simple.
- Use the
titleattribute (instead of
alt) to ensure desired tooltip behavior in multiple browsers.
- Authors able to run content-rewriting proxy servers can use them to dynamically alter outgoing content to ensure both the
altattributes are present.
- HTML 4.01 Specification: 13.8 How to specify alternate text
- HTML 4.01 Specification: 7.4.3 The title attribute
- bug 25537
Original Document Information
- Author(s): Eric A. Meyer, Netscape Communications
- Last Updated Date: Published 16 Aug 2002
- Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
- Note: This reprinted article was originally part of the DevEdge site.