For such an important attribute, it’s strange that the
title attribute doesn’t have better support than it does in modern web browsers.
title is used to provide secondary descriptive text about an element, often rendered as a tooltip on mouse hover. Unfortunately, all major web browsers have bugs with whitespace and/or character reference handling on this attribute, making the feature often unusable for multiple-line texts.
I have constructed a title attribute tooltip test suite which I would like all major browsers to pass. Currently, Internet Explorer, Firefox, Opera, Safari, and Konqueror all fail at least one of the tests.
Internet Explorer allows line breaks in the tooltip value, but in the incorrect manner: it will display a line break if there are newlines or carriage returns in the source HTML. Newlines in the attribute source should be ignored and carriage returns should be converted to spaces, as in other CDATA attribues. The proper way to represent a line break in the attribute value is to use a newline character reference (
), which Internet Explorer also (correctly) converts into a line break. IE also handles tab characters in the source incorrectly.
Firefox has perhaps the most disruptive bug, which limits the tooltip text to a small number of characters on a single line. Progress on fixing that bug is blocked by another bug relating to the calculation of tooltip heights. Firefox also has several problems with newlines, carriage returns, and tabs in the source HTML and doesn’t convert newline character references into line breaks. This is overall the worst implementation of the
title attribute of all major browsers.
Opera fares well in the whitespace handling, but it doesn’t convert newline character references into line breaks, making multi-line values impossible.
Safari makes line breaks on newlines and carriage returns in the source and uses tab characters for wide spacing instead of ignoring the newlines and converting carriage returns and tabs into spaces.
Konqueror generally does well, but it handles newline characters in the source like Internet Explorer does. I would say this is the best implementation so far, although still not perfect.
With the growing amount of web-based applications aiming to provide the functionality and feel of traditional desktop applications, proper tooltip display of the
title attribute value is becoming increasingly important. Please petition the browser developers for attention to this issue.
I’ve corrected the link to the Firefox bug report. The previously linked report was specifically for Mozilla/SeaMonkey.