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.

The Problem

According to the HTML 4.01 definition of the alt attribute:

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 title attribute.

The Solution

The most obvious solution is to use the alt and 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
• Safari
• 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 alt= for title=.

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 for Web servers that are based on content management systems, including Microsoft's Active Server Pages, which make such substitutions fairly simple.

Recommendations

• Use the title attribute (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 title and alt attributes are present.

Related Links

• HTML 4.01 Specification: 13.8 How to specify alternate text
• HTML 4.01 Specification: 7.4.3 The title attribute
• bug 25537