Defining Cross-Browser Tooltips

  • Revision slug: Defining_Cross-Browser_Tooltips
  • Revision title: Defining Cross-Browser Tooltips
  • Revision id: 186648
  • Created:
  • Creator: Pmsyyz
  • Is current revision? No
  • Comment /* The Solution */

Revision Content

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 {{template.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 {{wiki.template('Named-bug', [ "25537#c73", "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 {{wiki.template('Named-bug', [ "25537#c83", "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

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.

Revision Source

<p><span class="comment">Summary: Authors are used to having alt text appear as a &amp;quot;tooltip&amp;quot; above images, but that's not how it was meant to be used. Learn how to define &amp;quot;tooltips&amp;quot; in a cross-browser, standards-friendly way.</span>
Authors are used to using the <code>alt</code> 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 <code>alt</code> attribute are displayed as a "tooltip." Gecko-based browsers such as Mozilla, Netscape 6+, and Compuserve 7 do not support this behavior. See {{template.Bug(25537)}} for a lengthy, sometimes passionate discussion of Gecko's behavior in this regard.
</p>
<h3 name="The_Problem"> The Problem </h3>
<p>According to the <a class="external" href="http://www.w3.org/TR/html4/struct/objects.html#adef-altv">HTML 4.01 definition</a> of the <code>alt</code> attribute:
</p>
<dl><dt><code>alt</code> = <a class="external" href="http://www.w3.org/TR/html4/types.html#type-text">text</a> [<a class="external" href="http://www.w3.org/TR/html4/types.html#case-sensitive">CS</a>]
</dt><dd>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 <a class="external" href="http://www.w3.org/TR/html4/struct/dirlang.html#adef-lang"><code>lang</code></a> attribute.
</dd></dl>
<p>In other words, <code>alt</code> 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 <code>alt</code> 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 <code>alt</code> text should be displayed in place of the missing image.
</p><p>On the other hand, the <a class="external" href="http://www.w3.org/TR/html401/struct/global.html#adef-title">HTML 4.01 definition</a> of the <code>title</code> attribute states:
</p>
<dl><dt><code>title</code> = <a class="external" href="http://www.w3.org/TR/html4/types.html#type-text">text</a> [<a class="external" href="http://www.w3.org/TR/html4/types.html#case-sensitive">CS</a>]
</dt><dd>This attribute offers advisory information about the element for which it is set.<br>Unlike the <a class="external" href="http://www.w3.org/TR/html4/struct/global.html#edef-TITLE"><code>TITLE</code></a> element, which provides information about an entire document and may only appear once, the <a class="external" href="http://www.w3.org/TR/html4/struct/global.html#adef-title"><code>title</code></a> attribute may annotate any number of elements. Please consult an element's definition to verify that it supports this attribute... Values of the <a class="external" href="http://www.w3.org/TR/html4/struct/global.html#adef-title"><code>title</code></a> 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).
</dd></dl>
<p>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 <code>title</code> attribute.
</p>
<h3 name="The_Solution"> The Solution </h3>
<p>The most obvious solution is to use the <code>alt</code> and <code>title</code> attributes for their intended purposes, instead of adhering to their historical misuses. A quick check of various user agents showed that <code>title</code> attribute contents were displayed as a "tooltip" in:
</p>
<ul><li> Gecko-based browsers (Mozilla Firefox, Netscape 6+, etc.)
</li><li> Internet Explorer 5.5+/Win
</li><li> Internet Explorer 5.x/Mac
</li><li> Safari
</li><li> Opera 6.x+
</li></ul>
<p>Of these, only IE/Win treated <code>alt</code> 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 <code>alt=</code> for <code>title=</code>.
</p><p>If such a find-and-replace operation is somehow not feasible, authors with the ability to run proxy servers can use the {{wiki.template('Named-bug', [ "25537#c73", "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 <code>alt</code> attribute but no <code>title</code> attribute, and inserts a <code>title</code> attribute with the same content as the <code>alt</code> attribute. A variant on Christian's original suggestion was made by "CT" in {{wiki.template('Named-bug', [ "25537#c83", "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.
</p>
<h3 name="Recommendations"> Recommendations </h3>
<ul><li> Use the <code>title</code> attribute (instead of <code>alt</code>) to ensure desired tooltip behavior in multiple browsers.
</li><li> Authors able to run content-rewriting proxy servers can use them to dynamically alter outgoing content to ensure both the <code>title</code> and <code>alt</code> attributes are present.
</li></ul>
<h3 name="Related_Links"> Related Links </h3>
<ul><li> <a class="external" href="http://www.w3.org/TR/html4/struct/objects.html#adef-alt">HTML 4.01: alt</a>
</li><li> <a class="external" href="http://www.w3.org/TR/html4/struct/global.html#adef-title">HTML 4.01: title</a>
</li><li> {{template.Bug(25537)}}
</li></ul>
<div class="originaldocinfo">
<h3 name="Original_Document_Information"> Original Document Information </h3>
<ul><li> Author(s): Eric A. Meyer, Netscape Communications
</li><li> Last Updated Date: Published 16 Aug 2002
</li><li> Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved. 
</li><li> Note: This reprinted article was originally part of the DevEdge site.
</li></ul>
</div>
Revert to this revision