Coder Perfect

Add line break within tooltips


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


with the styling

.tooltip-inner {
    white-space: pre-line;

worked for me.

Answered by klausf

Post is based on