How can I use a carriage return in a HTML tooltip?
Question
I'm currently adding verbose tooltips to our site, and I'd like (without having to resort to a whizz-bang jQuery plugin, I know there are many!) to use carriage returns to format the tooltip.
To add the tip I'm using the title attribute. I've looked around the usual sites and using the basic template of:
<a title='Tool?Tip?On?New?Line'>link with tip</a>
I've tried replacing the ? with:
<br />&013; / \r\nEnvironment.NewLine(I'm using C#)
None of the above works. Is it possible?
Accepted Answer
It's so simple you'll kick yourself... just press enter!
<a title='Tool
Tip
On
New
Line'>link with tip</a>
Firefox won't display multi-line tooltips at all though - it will replace the newlines with nothing.
Popular Answer
The latest specification allows line feed character, so a simple line break inside the attribute or entity (note that characters # and ; are required) are OK.
Read more... Read less...
Try character 10. It won't work in Firefox though. :(
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.
http://modp.com/wiki/htmltitletooltips
Update:
As of January 2015 Firefox does support using to insert a line break in an HTML title attribute. See the snippet example below.
<a href="#" title="Line 1 Line 2 Line 3">Hover for multi-line title</a>Tested this in IE, Chrome, Safari, Firefox (latest versions 2012-11-27):
Works in all of them...
Also worth mentioning, if you are setting the title attribute with Javascript like this:
divElement.setAttribute("title", "Line one Line two");
It won't work. You have to replace that ASCII decimal 10 to a ASCII hexadecimal A in the way it's escaped with Javascript. Like this:
divElement.setAttribute("title", "Line one\x0ALine two");
As of Firefox 12 they now support line breaks using the line feed HTML entity:
<span title="First line Second line">Test</span>
This works in IE and is the correct according to the HTML5 spec for the title attribute.
If you are using jQuery :
$(td).attr("title", "One \n Two \n Three");
will work.
tested in IE-9 : working.