Defining Cross-Browser Tooltips
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 Bugzilla entry 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 lang attribute.
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.
Unlike the TITLE element, which provides information about an entire document and may only appear once, the title attribute may annotate any number of elements. Please consult an element's definition to verify that it supports this attribute... Values of the title attribute 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, 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, 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 Bugzilla entry 25537, comment 83. A similar solution can be employed 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.