Add line break to tooltip in Bootstrap 3

Question

I am using Bootstrap 3 and added a tooltip to my div. I've tried using < br > \n and  to create the new line. Would it be a problem with the Bootstrap stopping me?

<div class="content show-tooltip" data-placement="top" 
     data-original-title="1st line of text <br> 2nd line of text">

Carol Skelly · Accepted Answer · 2022-01-03T15:24:25.577

240

You need to add data-html="true" to the markup..

<div class="content show-tooltip" data-html="true" data-placement="top" 
     title="1st line of text <br> 2nd line of text">

Working demo: https://codeply.com/p/C8083WXo5Z

edited Jan 03 '22 at 15:24

answered Sep 25 '13 at 10:02

Carol Skelly

351,302
90
710
624

This is great thanks. Are there docs available on these data attributes? – Pierce McGeough Sep 25 '13 at 10:07
1

I found the docs here (did they move?): http://getbootstrap.com/javascript/#popovers-options – Jon Schneider Jan 06 '15 at 14:55
1

thanks for this, i dont see data-html="true" anywhere in the docs tho – dtc Jul 08 '15 at 06:59
how can I activate it from javascript? – behzad Jan 17 '16 at 10:30
1

For anyone still looking 6 years later, you can find the data attribute documentation for v3.4 [here](https://getbootstrap.com/docs/3.4/javascript/#tooltips-options) – MichaelM Dec 02 '19 at 15:51
Could you explain why you need to add data-html="true", thanks. – Chris Dec 27 '21 at 18:56
1

@Chris - Read the [docs](https://getbootstrap.com/docs/3.4/javascript/#tooltips-options).. look at the "html" option – Carol Skelly Jan 03 '22 at 15:25

score 4 · Answer 2 · answered Nov 25 '17 at 20:20

4

In the Title use this code to break the line:

HTML

...title="- Item 1 &#013; - Item 2 &#013;"

CSS

.ui-tooltip {
    /* tooltip container box */
    white-space: pre-line;
}

.ui-tooltip-content {
    /* tooltip content */
    white-space: pre-line;
}

answered Nov 25 '17 at 20:20

Thalles Noce

791
1
9
20

2

This works, but this adds a space character at the start of my new line. It seems do the same, but without this front space character. – mike123 May 08 '20 at 09:42

Add line break to tooltip in Bootstrap 3

2 Answers2

Linked

Related