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\nEnvironment.NewLine(I'm using C#)
None of the above works. Is it possible?
The answer is
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 
World">hover here</div>use data-html="true" and apply <br>.
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.
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.
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'
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");

 <----- This is the text needed to insert Carry Return.
Razor Syntax
In the case of ASP.NET MVC you can just store the title as a variable as use \r\n and it'll work.
@{
var logTooltip = "Sunday\r\nMonday\r\netc.";
}
<h3 title="@logTooltip">Logs</h3>
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 
World">hover here</div>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 Line 2 Line 3">Hover for multi-line title</a>If you are using jQuery :
$(td).attr("title", "One \n Two \n Three");
will work.
tested in IE-9 : working.
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.
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_x000D_
Tip_x000D_
On_x000D_
New_x000D_
Line'>Tooltip with <pre>_x000D_
new _x000D_
line</pre> Works in all browsers</p>_x000D_
<hr/>_x000D_
_x000D_
<p title="Tool Tip On New Line">Tooltip with <code>&#13;</code> Not works Firefox browsers</p>_x000D_
<hr/>_x000D_
_x000D_
<p title='Tool Tip On New Line'>Tooltip with <code>&#10;</code> Works in some browsers</p>_x000D_
<hr/>_x000D_
_x000D_
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>&#xD;</code> May work in some browsers</p>_x000D_
<hr/>_x000D_
_x000D_
<p id='tooltip'>Tooltip with <code>document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")</code> May work in some browsers</p>_x000D_
<hr/>_x000D_
_x000D_
_x000D_
<p title="List:_x000D_
• List item here_x000D_
• Another list item here_x000D_
• Aaaand another list item, lol">Tooltip with <code>• </code>Unordered list tooltip</p>_x000D_
<hr/>_x000D_
_x000D_
_x000D_
<p title='Tool\nTip\nOn\nNew\nLine'>Tooltip with <code>\n</code> May not work in modern browsers</p>_x000D_
<hr/>_x000D_
_x000D_
<p title='Tool\tTip\tOn\tNew\tLine'>Tooltip with <code>\t</code> May not work in modern browsers</p>_x000D_
<hr/>_x000D_
_x000D_
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>&#013;</code> Works in most browsers</p>_x000D_
<hr/>As a contribution to the 
 solution, we can also use 	 for tabs if you ever need to do something like this.
<button title="My to-do list:
	-Item 2
	-Item 3
	-Item 4
		-Subitem 1">TEST</button>Demo
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.
On Chrome 16, and possibly earlier versions, you can use "\n". As a sidenote, "\t" also works
hack but works - (tested on chrome and mobile)
just add no break spaces till it breaks - you might have to limit the tooltip size depending on the amount of content but for small text messages this works:
etc
Tried everything above and this is the only thing that worked for me -
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_x000D_
Tip_x000D_
On_x000D_
New_x000D_
Line'>Tooltip with <pre>_x000D_
new _x000D_
line</pre> Works in all browsers</p>_x000D_
<hr/>_x000D_
_x000D_
<p title="Tool Tip On New Line">Tooltip with <code>&#13;</code> Not works Firefox browsers</p>_x000D_
<hr/>_x000D_
_x000D_
<p title='Tool Tip On New Line'>Tooltip with <code>&#10;</code> Works in some browsers</p>_x000D_
<hr/>_x000D_
_x000D_
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>&#xD;</code> May work in some browsers</p>_x000D_
<hr/>_x000D_
_x000D_
<p id='tooltip'>Tooltip with <code>document.getElementById("tooltip").setAttribute("title", "Tool\x0ATip\x0AOn\x0ANew\x0ALine")</code> May work in some browsers</p>_x000D_
<hr/>_x000D_
_x000D_
_x000D_
<p title="List:_x000D_
• List item here_x000D_
• Another list item here_x000D_
• Aaaand another list item, lol">Tooltip with <code>• </code>Unordered list tooltip</p>_x000D_
<hr/>_x000D_
_x000D_
_x000D_
<p title='Tool\nTip\nOn\nNew\nLine'>Tooltip with <code>\n</code> May not work in modern browsers</p>_x000D_
<hr/>_x000D_
_x000D_
<p title='Tool\tTip\tOn\tNew\tLine'>Tooltip with <code>\t</code> May not work in modern browsers</p>_x000D_
<hr/>_x000D_
_x000D_
<p title='Tool
Tip
On
New
Line'>Tooltip with <code>&#013;</code> Works in most browsers</p>_x000D_
<hr/>I don't believe it is. Firefox 2 trims long link titles anyway and they should really only be used to convey a small amount of help text. If you need more explanation text I would suggest that it belongs in a paragraph associated with the link. You could then add the tooltip javascript code to hide those paragraphs and show them as tooltips on hover. That's your best bet for getting it to work cross-browser IMO.
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
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>
I don't believe it is. Firefox 2 trims long link titles anyway and they should really only be used to convey a small amount of help text. If you need more explanation text I would suggest that it belongs in a paragraph associated with the link. You could then add the tooltip javascript code to hide those paragraphs and show them as tooltips on hover. That's your best bet for getting it to work cross-browser IMO.
I am on firefox 68.7.0esr and the 
 doesn't work. Breaking the lines via <CR> did work so I am going with that since it simple and forward.
i.e.
<option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk
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 Line 2 Line 3">Hover for multi-line title</a>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");
As a contribution to the 
 solution, we can also use 	 for tabs if you ever need to do something like this.
<button title="My to-do list:
	-Item 2
	-Item 3
	-Item 4
		-Subitem 1">TEST</button>Demo
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'
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.
If you are using jQuery :
$(td).attr("title", "One \n Two \n Three");
will work.
tested in IE-9 : working.
will work on all majors browsers (IE included)
Tested this in IE, Chrome, Safari, Firefox (latest versions 2012-11-27):
Works in all of them...
As of Firefox 12 they now support line breaks using the line feed HTML entity:
<span title="First line Second line">Test</span>
This works in IE and is the correct according to the HTML5 spec for the title attribute.
will work on all majors browsers (IE included)
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
On Chrome 79, does not work anymore.
I was successful with:
This works in all major browsers.
will work on all majors browsers (IE included)

 <----- This is the text needed to insert Carry Return.
I am on firefox 68.7.0esr and the 
 doesn't work. Breaking the lines via <CR> did work so I am going with that since it simple and forward.
i.e.
<option title="Constraint PSC/SCS/Activity
Definition Constraint Checker
Database Start Notifier">CnCk
Tested this in IE, Chrome, Safari, Firefox (latest versions 2012-11-27):
Works in all of them...
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.
Razor Syntax
In the case of ASP.NET MVC you can just store the title as a variable as use \r\n and it'll work.
@{
var logTooltip = "Sunday\r\nMonday\r\netc.";
}
<h3 title="@logTooltip">Logs</h3>
I have tried with " " to display title text in new line and it's work like a charm
hack but works - (tested on chrome and mobile)
just add no break spaces till it breaks - you might have to limit the tooltip size depending on the amount of content but for small text messages this works:
etc
Tried everything above and this is the only thing that worked for me -
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.
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 Line 2 Line 3">Hover for multi-line title</a>Just use this:
<a title='Tool
Tip
On
New
Line'>link with tip</a>
You can add new line on title by using this 
.
I don't believe it is. Firefox 2 trims long link titles anyway and they should really only be used to convey a small amount of help text. If you need more explanation text I would suggest that it belongs in a paragraph associated with the link. You could then add the tooltip javascript code to hide those paragraphs and show them as tooltips on hover. That's your best bet for getting it to work cross-browser IMO.
Much nicer looking tooltips can be created manually, and can include HTML formatting.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse <a href="#" title="some text
more and then some">over</a> the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text
some <b>more</b><br/>
<i>and</i> more</span>
</div>
<div class="tooltip">Each tooltip is independent
<span class="tooltiptext">Other tooltip text
some more<br/>
and more</span>
</div>
</body>
</html>
This is taken from the w3schools post on this. Experiment with the above code here.
I don't believe it is. Firefox 2 trims long link titles anyway and they should really only be used to convey a small amount of help text. If you need more explanation text I would suggest that it belongs in a paragraph associated with the link. You could then add the tooltip javascript code to hide those paragraphs and show them as tooltips on hover. That's your best bet for getting it to work cross-browser IMO.
On Chrome 79, does not work anymore.
I was successful with:
This works in all major browsers.
will work on all majors browsers (IE included)
I have tried with " " to display title text in new line and it's work like a charm
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.
use data-html="true" and apply <br>.
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
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 Line 2 Line 3">Hover for multi-line title</a>Just use this:
<a title='Tool
Tip
On
New
Line'>link with tip</a>
You can add new line on title by using this 
.
As of Firefox 12 they now support line breaks using the line feed HTML entity:
<span title="First line Second line">Test</span>
This works in IE and is the correct according to the HTML5 spec for the title attribute.
Much nicer looking tooltips can be created manually, and can include HTML formatting.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse <a href="#" title="some text
more and then some">over</a> the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text
some <b>more</b><br/>
<i>and</i> more</span>
</div>
<div class="tooltip">Each tooltip is independent
<span class="tooltiptext">Other tooltip text
some more<br/>
and more</span>
</div>
</body>
</html>
This is taken from the w3schools post on this. Experiment with the above code here.
On Chrome 16, and possibly earlier versions, you can use "\n". As a sidenote, "\t" also works
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
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>
Source: Stackoverflow.com