htmltitletooltips[modp.com]

HTML Title Tooltips

You can add nifty "tooltips" to HTML content by added the title attribute to just about any element. If you hover over the gray element, a "tooltip" should pop up. Hover over here.

You can also add tooltips to block elements like div and nest them. The following code:

<div title="outer tooltip" 
     style="border: solid 1px; margin: 10px; padding: 10px">
<span title="inner tooltip">
This is a div and span tooltip test
</span>
<div>

This is a div and span tooltip test

This is just an attribute of an HTML element. There is no support for:

fade-in or fade-out time
CSS support
background colors or font

The text is displayed (if at all) in a browser dependent manner. Small tooltips work on most browsers. Long tooltips and line breaking work in IE and Safari (use 
 or  for a new newline). Firefox and Opera do not support newlines. Firefox does not support long tooltips.

If you want "fancy" or cross-platform tooltips, you'll have to use DHTML. Fortunately, someone as already written it for you. Check out http://DynamicDrive.com)

Actual HTML Title Behavior

In my ideal world, actual newlines and carriage returns in the document would be stripped out so

title="line one
line two"

would transformed into one line. But if you explicitly added a line feed with 


title="line one &#10; line two"

then you would have a line break. And in my ideal world, "basic HTML markup" would be allowed.

In practice, this is what you get:

Description	tooltip	IE 6.0	Safari 1.3,2	FF 1,2	Opera 8.0
small tool tip	tooltip	Pass	Pass	Pass	Pass⁵
very long tool tip	tooltip	Pass	Pass	Fail¹	Pass
Copyright © 2005	tooltip	Pass	Pass	Pass	Pass
line one line two	tooltip	Pass	Pass	Fail³	Fail⁴
line one line two	tooltip	Pass	Pass	Fail⁴	Fail⁴
line one <br />line two	tooltip	Fail²	Fail²	Fail²	Fail²

Failure Notes

¹	Firefox: Text is truncated, and is one line
²	Embedded HTML not supported by any browser
³	Firefox: Makes odd character instead of a line break
⁴	Firefox, Opera 8.0: No line break
⁵	Opera 8.0: All tooltips have prefix of 'Title: ' displayed

What the specification says

What the Specification Says

From the HTML 4.0 Specification:

title = text [CS] This attribute offers advisory information about the element for which it is set.... 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).

if you follow the text link above, you finally get the definition for CDATA:

CDATA is a sequence of characters from the document character set and may include character entities. User agents should interpret attribute values as follows:

Replace character entities with characters,
Ignore line feeds
Replace each carriage return or tab with a single space.

The word "should" has a very specific meaning from RFC 2119:

SHOULD This word, or the adjective "RECOMMENDED", mean that there may exist valid reasons in particular circumstances to ignore a particular item, but the full implications must be understood and carefully weighed before choosing a different course.

In summary, I take out of this

it is left to the user-agent implementor on what to do with the title. The specification provide guidances, but no requirements, or even an recommendation.
Except that the title text, should be stripped of line-feeds, carriage returns, and tabs.

In other words, anything goes on what is displayed.

Conclusion

You can safely have one line of 50 or so characters, and expect it to displayed roughly similarly on most browsers.

For more advanced tooltips, you can create a mouseover event that displayed an absolutely positioned div block. But that's another article. (actually, it's another website! Check out http://DynamicDrive.com/)

Postscript

I wrote this in 2005, I just reconverted it to wiki format. So far, it still seems valid and i rechecked with FF2, etc –nickg July 2007

Name:	htmltitletooltips
Created:	11-Jul-2007
Modified:	61 weeks ago