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

None of the above works. Is it possible?

Answer 1

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.

Answer 2

If you are using jQuery :

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

will work.

tested in IE-9 : working.

Answer 3

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 4

As a contribution to the 
 solution, we can also use &#009 for tabs if you ever need to do something like this.

<button title="My to-do list:&#013;&#009;-Item 2&#013;&#009;-Item 3&#013;&#009;-Item 4&#013;&#009;&#009;-Subitem 1">TEST</button>

Demo

Answer 5

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.

Answer 6

Just use JavaScript. Then compatible with most and older browsers. Use the escape sequence \n for newline.

   document.getElementById("ElementID").title = 'First Line text \n Second line text'