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

From the information available on accessibility and the use of tooltips making them larger with the use of CR or line break is appreciated, the fact that the various browsers cannot/will not agree on basics shows that they don't much care about accessibility.

Answer 2

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 3

On Chrome 79, 
 does not work anymore.

I was successful with:




This works in all major browsers.

Answer 4

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'

Answer 5

It’s so simple you’ll kick yourself: just press Enter!

<a title='Tool
Tip
On
New
Line'>link with tip</a>

Answer 6

On Chrome 16, and possibly earlier versions, you can use "\n". As a sidenote, "\t" also works