Problem
How do you add line breaks to an HTML tooltip?
Within the tooltip, I tried using br/> and n as follows:
<a href="#" title="Some long text <br/> Second line text \n Third line text">Hover me</a>
However, this was pointless because the literal text br/> and n could be seen within the tooltip. Any suggestions would be greatly appreciated.
Asked by Aakash Chakravarthy
Solution #1
For a linebreak in a title attribute, simply use the entity code .
Answered by Fred Senese
Solution #2
Simply include a data attribute.
then you’re all set.
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 so far worked with the most of the tooltip plugins I’ve used.
Answered by siwalikm
Solution #3
The combination of the and the style white-space: pre-line; worked for me.
Answered by GuitarWorker
Solution #4
This CSS, combined with a linefeed in my editor, eventually worked for me:
.tooltip-inner {
white-space: pre-wrap;
}
How to make Twitter bootstrap tooltips with several lines may be found here.
Answered by Dan
Solution #5
\n
with the styling
.tooltip-inner {
white-space: pre-line;
}
worked for me.
Answered by klausf
Post is based on https://stackoverflow.com/questions/3340802/add-line-break-within-tooltips