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


 will work in i.e. only

Answer 2

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

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

Answer 3

I know I'm late to the party, but for those that just want to see this working, here's a demo: http://jsfiddle.net/rzea/vsp6840b/3/

HTML used:

<a href="#" title="First Line&#013;Second Line">Multiline Tooltip</a>
<br>
<br>
<a href="#" title="List:
  • List item here
  • Another list item here
  • Aaaand another list item, lol">Unordered list tooltip</a>

Answer 4

According to this article on the w3c website:

CDATA is a sequence of characters from the document character set and may include character entities. User agents should interpret attribute values as follows:

• Replace character entities with characters,
• Ignore line feeds,
• Replace each carriage return or tab with a single space.

This means that (at least) CR and LF won't work inside title attribute. I suggest that you use a tooltip plugin. Most of these plugins allow arbitrary HTML to be displayed as an element's tooltip.

Answer 5

This 
 should work if you just use a simple title attribute.

on bootstrap popovers, just use data-html="true" and use html in the data-content attribute .

<div title="Hello &#013;World">hover here</div>

Answer 6

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