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

Answer 1

As for whom 
 didn't work you have to style the element on which lines are visible in as : white-space: pre-line;

Referenced from this Answer : https://stackoverflow.com/a/17172412/1460591

Answer 2

As of Firefox 12 they now support line breaks using the line feed HTML entity: 


<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.

Answer 3

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&#13;Line 2&#13;Line 3">Hover for multi-line title</a>

Answer 4


 <----- This is the text needed to insert Carry Return.

Answer 5

If you are using jQuery :

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

will work.

tested in IE-9 : working.

Answer 6

We had a requirement where we needed to test all of these, here is what I wish to share

document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")

<p title='Tool
Tip
On
New
Line'>Tooltip with <pre>
  new 
  line</pre> Works in all browsers</p>
<hr/>

<p title="Tool&#13;Tip&#13;On&#13;New&#13;Line">Tooltip with <code>&amp;#13;</code> Not works Firefox browsers</p>
<hr/>

<p title='Tool&#10;Tip&#10;On&#10;New&#10;Line'>Tooltip with <code>&amp;#10;</code> Works in some browsers</p>
<hr/>

<p title='Tool&#x0aTip&#x0aOn&#x0aNew&#x0aLine'>Tooltip with <code>&amp;#xD;</code> May work in some browsers</p>
<hr/>

<p id='tooltip'>Tooltip with <code>document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")</code> May work in some browsers</p>
<hr/>


<p title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Tooltip with <code>• </code>Unordered list tooltip</p>
<hr/>


<p title='Tool\nTip\nOn\nNew\nLine'>Tooltip with <code>\n</code> May not work in modern browsers</p>
<hr/>

<p title='Tool\tTip\tOn\tNew\tLine'>Tooltip with <code>\t</code> May not work in modern browsers</p>
<hr/>

<p title='Tool&#013;Tip&#013;On&#013;New&#013;Line'>Tooltip with <code>&amp;#013;</code> Works in most browsers</p>
<hr/>

Fiddle