Compare Revisions

Defining Cross-Browser Tooltips

Change Revisions

Revision 186654:

Revision 186654 by Dria on

Revision 186655:

Revision 186655 by UvbZyv on

Defining Cross-Browser Tooltips
Defining Cross-Browser Tooltips
css, Cross-browser_Development, "Web Development"
css, Cross-browser_Development, "Web Development"

Revision 186654
Revision 186655
n8      <span class="comment">Summary: Authors are used to having an8      <span class="comment">Summary: Authors are used to having a
>lt text appear as a &amp;quot;tooltip&amp;quot; above images, but>lt text appear as a</span>
> 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 w 
>ay.</span> Authors are used to using the <code>alt</code> attribu 
>te to create "tooltips" in Web browsers. The classic example is a 
> "tooltip" of an image; when the user pauses the mouse pointer ov 
>er an image, the contents of the <code>alt</code> attribute are d 
>isplayed as a "tooltip." Gecko-based browsers such as Mozilla, Ne 
>tscape 6+, and Compuserve 7 do not support this behavior. See {{t 
>emplate.Bug(25537)}} for a lengthy, sometimes passionate discussi 
>on of Gecko's behavior in this regard. 
t10    <h3 name="The_Problem">t
11      The Problem
12    </h3>
13    <p>
14      According to the <a class="external" href="http://www.w3.or
>g/TR/html4/struct/objects.html#adef-altv">HTML 4.01 definition</a 
>> of the <code>alt</code> attribute: 
15    </p>
16    <dl>
17      <dt>
18        <code>alt</code> = <a class="external" href="http://www.w
>">text</a> <a class="external" 
> href="">CS</ 
19      </dt>
20      <dd>
21        For user agents that cannot display images, forms, or app
>lets, this attribute specifies alternate text. The language of th 
>e alternate text is specified by the <a class="external" href="ht 
>g</code></a> attribute. 
22      </dd>
23    </dl>
24    <p>
25      In other words, <code>alt</code> text should only be displa
>yed when a user agent cannot display the primary content of the e 
>lement (e.g., a text-mode browser that cannot display images). In 
> a visual browser, the image should be displayed and the <code>al 
>t</code> text should not. This assumes that the browser can find  
>the image and that it supports the image format used; if either o 
>f 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. 
26    </p>
27    <p>
28      On the other hand, the <a class="external" href="http://www
>">HTML 4.01 defin 
>ition</a> of the <code>title</code> attribute states: 
29    </p>
30    <dl>
31      <dt>
32        <code>title</code> = <a class="external" href="http://www
>">text</a> <a class="externa 
>l" href="">CS 
33      </dt>
34      <dd>
35        This attribute offers advisory information about the elem
>ent for which it is set.<br> 
36        Unlike the <a class="external" href="
>/html4/struct/global.html#edef-TITLE"><code>TITLE</code></a> elem 
>ent, which provides information about an entire document and may  
>only appear once, the <a class="external" href=" 
>/TR/html4/struct/global.html#adef-title"><code>title</code></a> a 
>ttribute may annotate any number of elements. Please consult an e 
>lement's definition to verify that it supports this attribute...  
>Values of the <a class="external" href=" 
>4/struct/global.html#adef-title"><code>title</code></a> attribute 
> may be rendered by user agents in a variety of ways. For instanc 
>e, visual browsers frequently display the title as a "tool tip" ( 
>a short message that appears when the pointing device pauses over 
> an object). 
37      </dd>
38    </dl>
39    <p>
40      Between these two passages, it is fairly clear that the pro
>per method for defining a "tooltip" for an image (or, indeed, for 
> any element) is to use the <code>title</code> attribute. 
41    </p>
42    <h3 name="The_Solution">
43      The Solution
44    </h3>
45    <p>
46      The most obvious solution is to use the <code>alt</code> an
>d <code>title</code> attributes for their intended purposes, inst 
>ead of adhering to their historical misuses. A quick check of var 
>ious user agents showed that <code>title</code> attribute content 
>s were displayed as a "tooltip" in: 
47    </p>
48    <ul>
49      <li>Gecko-based browsers (Mozilla Firefox, Netscape 6+, etc
50      </li>
51      <li>Internet Explorer 5.5+/Win
52      </li>
53      <li>Internet Explorer 5.x/Mac
54      </li>
55      <li>Safari
56      </li>
57      <li>Opera 6.x+
58      </li>
59    </ul>
60    <p>
61      Of these, only IE/Win treated <code>alt</code> text as a "t
>ooltip"; the other browsers did not reproduce this behavior. Auth 
>ors who are faced with the prospect of editing a large collection 
> of legacy documents should be able to convert their documents us 
>ing a batch find-and-replace operation, for example substituting  
><code>alt=</code> for <code>title=</code>. 
62    </p>
63    <p>
64      If such a find-and-replace operation is somehow not feasibl
>e, authors with the ability to run proxy servers can use the {{wi 
>ki.template('Named-bug', [ "25537#c73", "approach proposed by Chr 
>istian Jensen" ])}}, which is to run a proxy server that rewrites 
> HTML source on the fly, as it is sent to the user. In this appro 
>ach, the server checks outgoing HTML for elements that have an <c 
>ode>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', [ "2 
>5537#c83", "Bugzilla entry 25537, comment 83" ])}}. A similar sol 
>ution can be employed for Web servers that are based on content m 
>anagement systems, including Microsoft's Active Server Pages, whi 
>ch make such substitutions fairly simple. 
65    </p>
66    <h3 name="Recommendations">
67      Recommendations
68    </h3>
69    <ul>
70      <li>Use the <code>title</code> attribute (instead of <code>
>alt</code>) to ensure desired tooltip behavior in multiple browse 
71      </li>
72      <li>Authors able to run content-rewriting proxy servers can
> use them to dynamically alter outgoing content to ensure both th 
>e <code>title</code> and <code>alt</code> attributes are present. 
73      </li>
74    </ul>
75    <h3 name="Related_Links">
76      Related Links
77    </h3>
78    <ul>
79      <li>
80        <a class="external" href="
>ct/objects.html#adef-alt">HTML 4.01 Specification: 13.8 How to sp 
>ecify alternate text</a> 
81      </li>
82      <li>
83        <a class="external" href="
>ct/global.html#adef-title">HTML 4.01 Specification: 7.4.3 The tit 
>le attribute</a> 
84      </li>
85      <li>{{template.Bug(25537)}}
86      </li>
87    </ul>
88    <div class="originaldocinfo">
89      <h3 name="Original_Document_Information">
90        Original Document Information
91      </h3>
92      <ul>
93        <li>Author(s): Eric A. Meyer, Netscape Communications
94        </li>
95        <li>Last Updated Date: Published 16 Aug 2002
96        </li>
97        <li>Copyright Information: Copyright © 2001-2003 Netscape
>. All rights reserved. 
98        </li>
99        <li>Note: This reprinted article was originally part of t
>he DevEdge site. 
100        </li>
101      </ul>
102    </div>

Back to History