Advertisement
Advertisement


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; / &#13;
  • \r\n
  • Environment.NewLine (I'm using C#)

None of the above works. Is it possible?

2011/03/04
1
336
3/4/2011 11:58:18 AM

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.

2008/12/11
295
12/11/2008 10:24:34 AM


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 &#10; or &#13; 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 &#13; to insert a line break in an HTML title attribute. See the snippet example below.

<a href="#" title="Line 1&#13;Line 2&#13;Line 3">Hover for multi-line title</a>

2015/02/01

Tested this in IE, Chrome, Safari, Firefox (latest versions 2012-11-27):
&#13;

Works in all of them...


Also worth mentioning, if you are setting the title attribute with Javascript like this:

divElement.setAttribute("title", "Line one&#10;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");

2012/11/03

As of Firefox 12 they now support line breaks using the line feed HTML entity: &#10;

<span title="First line&#10;Second line">Test</span>

This works in IE and is the correct according to the HTML5 spec for the title attribute.

2014/07/09

If you are using jQuery :

$(td).attr("title", "One \n Two \n Three");

will work.

tested in IE-9 : working.

2012/10/18

Source: https://stackoverflow.com/questions/358874
Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow
Email: [email protected]