Add line break within tooltips
HtmlTooltipNewlineHtml Problem Overview
How can line breaks be added within a HTML tooltip?
I tried using <br/>
and \n
within the tooltip as follows:
<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>
However, this was useless and I could see the literal text <br/>
and \n
within the tooltip. Any suggestions will be helpful.
Html Solutions
Solution 1 - Html
Just use the entity code 
for a linebreak in a title attribute.
Solution 2 - Html
Just add a data attribute
> data-html="true"
and you're good to go.
Eg. usage:
<i data-html="true" class="tooltip ficon-help-icon" twipsy-content-set="true" data-original-title= "<b>Hello</b> Stackoverflow"> </i>
It has worked in majority of the tooltip plugins i have tried as of now.
Solution 3 - Html
The 
combined with the style white-space: pre-line; worked for me.
Solution 4 - Html
This CSS is what finally worked for me in conjunction with a linefeed in my editor:
.tooltip-inner {
white-space: pre-wrap;
}
Found here: https://stackoverflow.com/questions/13338780/how-to-make-twitter-bootstrap-tooltips-have-multiple-lines
Solution 5 - Html
\n
with the styling
.tooltip-inner {
white-space: pre-line;
}
worked for me.
Solution 6 - Html
Give \n
between the text. It work on all browsers.
Example
img.tooltip= " Your Text : \n"
img.tooltip += " Your text \n";
This will work for me and it's used in code behind.
Hope this will work for you
Solution 7 - Html
I found it. It can be done by simply doing like this
<a ref="#" title="First Line
Second Line
Third line">Hover Me</a>
Solution 8 - Html
The javascript version
Since 
(html) is 0D
(hex), this can be represented as '\u000d'
str = str.replace(/\n/g, '\u000d');
In addition,
Sharing with you guys an AngularJS filter that replaces \n
with that character thanks to the references in the other answers
app.filter('titleLineBreaker', function () {
return function (str) {
if (!str) {
return str;
}
return str.replace(/\n/g, '\u000d');
};
});
usage
<div title="{{ message | titleLineBreaker }}"> </div>
Solution 9 - Html
just use \n in title and add this css
.tooltip-inner {
white-space: pre-wrap;
}
Solution 10 - Html
<br />
did work if you are using qTip
Solution 11 - Html
Just add data-html="true"
<a href="#" title="Some long text <br/> Second line text \n Third line text" data-html="true">Hover me</a>
Solution 12 - Html
You can use bootstrap tooltip, and don't forget to set the html option to true.
<div id="tool"> tooltip</div>
$('#tool').tooltip({
title: 'line one' +'<br />'+ 'line two',
html: true
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Solution 13 - Html
it is possible to add linebreaks within native HTML tooltips by simply having the title attribute spread over mutliple lines.
However, I'd recommend using a jQuery tooltip plugin such as Q-Tip: http://craigsworks.com/projects/qtip/.
It is simple to set up and use. Alternatively there are a lot of free javascript tooltip plugins around too.
edit: correction on first statement.
Solution 14 - Html
For me, a 2-step solution (combination of formatting the title and adding the style) worked, as follows:
- Format the
title
attrbiute:
<a ref="#" title="First Line
Second Line
Third line">Hover Me</a>
2) Add this style to the tips
element:
white-space: pre-line;
Tested in IE8, Firefox 22, and Safari 5.1.7.
Solution 15 - Html
Well if you are using Jquery Tooltip utility, then in "jquery-ui.js" Javascript file find following text:
tooltip.find(".ui-tooltip-content").html(content);
and put above that
content=content.replace(/\</g,'<').replace(/\>/g,'>');
I hope this will also work for you.
Solution 16 - Html
Just add this code snippet in your script:
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
and ofcourse as mentioned in above answers the data-html
should be "true"
. This will allow you to use html tags and formatting inside the value of title
attribute.
Solution 17 - Html
So if you are using bootstrap4 then this will work.
<style>
.tooltip-inner {
white-space: pre-wrap;
}
</style>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<a data-toggle="tooltip" data-placement="auto" title=" first line 
 next line" href= ""> Hover me </a>
If you are using in Django project then we can also display dynamic data in tooltips like:
<a class="black-text pb-2 pt-1" data-toggle="tooltip" data-placement="auto" title="{{ post.location }} 
 {{ post.updated_on }}" href= "{% url 'blog:get_user_profile' post.author.id %}">{{ post.author }}</a>
Solution 18 - Html
The solution for me was http://jqueryui.com/tooltip/:
And here the code (the part of script that make <br/>
Works is "content:"):
HTML HEAD
<head runat="server">
<script src="../Scripts/jquery-2.0.3.min.js"></script>
<link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="../Scripts/jquery-ui-1.10.3.min.js"></script>
<script>
/*Position:
my => at
at => element*/
$(function () {
$(document).tooltip({
content: function() {
var element = $( this );
if ( element.is( "[title]" ) ) {
return element.attr( "title" );
}
},
position: { my: "left bottom-3", at: "center top" } });
});
</script>
</head>
ASPX or HTML control
<asp:TextBox ID="Establecimiento" runat="server" Font-Size="1.3em" placeholder="Establecimiento" title="Texto 1.<br/>TIP: texto 2"></asp:TextBox>
Hope this help someone
Solution 19 - Html
Grater than Jquery UI 1.10 is not support to use html tag inside of the title attribute because its not valid html.
So the alternative solution is to use tooltip content option. Refer - http://api.jqueryui.com/tooltip/#option-content
Solution 20 - Html
Use

There shouldn't be any ; character.
Solution 21 - Html
if you are using jquery-ui 1.11.4:
var tooltip = $.widget( "ui.tooltip", {
version: "1.11.4",
options: {
content: function() {
// support: IE<9, Opera in jQuery <1.7
// .text() can't accept undefined, so coerce to a string
var title = $( this ).attr( "title" ) || "";
// Escape title, since we're going from an attribute to raw HTML
Replace--> //return $( "<a>" ).text( title ).html();
by --> return $( "<a>" ).html( title );
},
Solution 22 - Html
AngularJS with Bootstrap UI Tolltip (uib-tooltip), has three versions of tool-tip:
uib-tooltip, uib-tooltip-template and uib-tooltip-html
- uib-tooltip takes only text and will escape any HTML provided
- uib-tooltip-html takes an expression that evaluates to an HTML string
- uib-tooltip-template takes a text that specifies the location of the template
In my case, I opted for uib-tooltip-html and there are three parts to it:
- configuration
- controller
- HTML
Example:
(function(angular) {
//Step 1: configure $sceProvider - this allows the configuration of $sce service.
angular.module('myApp', ['uib.bootstrap'])
.config(function($sceProvider) {
$sceProvider.enabled(false);
});
//Step 2: Set the tooltip content in the controller
angular.module('myApp')
.controller('myController', myController);
myController.$inject = ['$sce'];
function myController($sce) {
var vm = this;
vm.tooltipContent = $sce.trustAsHtml('I am the first line <br /><br />' +
'I am the second line-break');
return vm;
}
})(window.angular);
//Step 3: Use the tooltip in HTML (UI)
<div ng-controller="myController as get">
<span uib-tooltip-html="get.tooltipContent">other Contents</span>
</div>
For more information, please check here
Solution 23 - Html
Using .html() instead of .text() worked for me. For example
.html("This is a first line." + "<br/>" + "This is a second line.")
Solution 24 - Html
use
should work (I've tested in Chrome, Firefox and Edge):
let users = [{username: 'user1'}, {username: 'user2'}, {username: 'user3'}];
let favTitle = '';
for(let j = 0; j < users.length; j++)
favTitle += users[j].username + " ";
$("#item").append('<i title="In favorite users: ' + favTitle + '">Favorite</i>');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id = item></div>
Solution 25 - Html
Just use the entity code 

for a linebreak in a title attribute.
<a title="First Line 
Second Line">Hover Me </a>
Solution 26 - Html
Hi this code will work in all browser !!i used for new line in chrome and safari and ul li for IE
function genarateMultiLIneCode(){
var =values["a","b","c"];
const liStart = '<li>';
const liEnd = '</li>';
const bullet = '• ';
var mergedString = ' ';
const unOrderListStart='<ul>'
const unOrderListEnd='</ul>'
const fakeNewline = '
';
for (let i = 0; i < values.length; i++) {
mergedString += liStart + bullet + values[i] + liEnd + fakeNewline;
}
const tempElement = document.createElement("div");
tempElement.innerHTML = unOrderListStart + mergedString + unOrderListEnd;
return tempElement.innerText;
}
}
Solution 27 - Html
This css will help you.
.tooltip {
word-break: break-all;
}
or if you want in one line
.tooltip-inner {
max-width: 100%;
}