Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add line break to tooltip in Bootstrap 3

I am using Bootstrap 3 and added a tooltip to my div. I've tried using < br > \n and &#013; 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"> 
like image 721
Pierce McGeough Avatar asked Sep 25 '13 09:09

Pierce McGeough


People also ask

How do I add a line break in tooltip?

Just use the entity code &#013; for a linebreak in a title attribute.

How do I use Bootstrap 3 tooltip?

How To Create a Tooltip. To create a tooltip, add the data-toggle="tooltip" attribute to an element. Note: Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.

How do you insert a line break in title attribute?

You can use &#013; or &#010; .


2 Answers

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

like image 84
Zim Avatar answered Oct 07 '22 18:10

Zim


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; } 
like image 22
Thalles Noce Avatar answered Oct 07 '22 18:10

Thalles Noce