How can I use a carriage return in a HTML tooltip?
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
Environment.NewLine(I'm using C#)
None of the above works. Is it possible?
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.
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
for a new newline). Firefox and Opera do not support newlines. Firefox does not support long tooltips.
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...
divElement.setAttribute("title", "Line one Line two");
divElement.setAttribute("title", "Line one\x0ALine two");
If you are using jQuery :
$(td).attr("title", "One \n Two \n Three");
tested in IE-9 : working.