|Modified:||62 weeks ago|
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 just an attribute of an HTML element. There is no support for:
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)
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 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:
|small tool tip||tooltip||Pass||Pass||Pass||Pass5|
|very long tool tip||tooltip||Pass||Pass||Fail1||Pass|
|Copyright © 2005||tooltip||Pass||Pass||Pass||Pass|
|line one line two||tooltip||Pass||Pass||Fail3||Fail4|
|line one line two||tooltip||Pass||Pass||Fail4||Fail4|
|line one <br />line two||tooltip||Fail2||Fail2||Fail2||Fail2|
|1||Firefox: Text is truncated, and is one line|
|2||Embedded HTML not supported by any browser|
|3||Firefox: Makes odd character instead of a line break|
|4||Firefox, Opera 8.0: No line break|
|5||Opera 8.0: All tooltips have prefix of 'Title: ' displayed|
What the Specification Says
From the HTML 4.0 Specification:
if you follow the text link above, you finally get the definition for CDATA:
The word "should" has a very specific meaning from RFC 2119:
In summary, I take out of this
In other words, anything goes on what is displayed.
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/)
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