How to make Twitter Bootstrap tooltips have multiple lines?

Question

I am currently using the below function to create text that will be displayed using Bootstrap’s tooltip plugin. How come multiline tooltips only work with <br> and not \n? I prefer that there is not any HTML in my links’ title attributes.

What works

def tooltip(object)
  tooltip = ""
  object.each do |user|
    tooltip += "#{user.identifier}" + "<br>"
  end
  return tooltip
end

What I want

def tooltip(object)
   tooltip = ""
   object.each do |user|
     tooltip += "#{user.identifier}" + "\n"
   end
   return tooltip
 end

will work on html rendering side, while /n will only display your html code in new line — rajesh kakawat, Nov 12 '12 at 05:51
I was looking at some other websites and they have multiline tooltips without the br — Matthew Hui, Nov 12 '12 at 06:00

score 277 · Accepted Answer · answered Jan 15 '13 at 23:35

277

You can use white-space:pre-wrap on the tooltip. This will make the tooltip respect new lines. Lines will still wrap if they are longer than the default max-width of the container.

.tooltip-inner {
    white-space:pre-wrap;
}

http://jsfiddle.net/chad/TSZSL/52/

If you want to prevent text from wrapping, do the following instead.

.tooltip-inner {
    white-space:pre;
    max-width:none;
}

http://jsfiddle.net/chad/TSZSL/53/

Neither of these will work with a \n in the html, they must actually be actual newlines. Alternatively, you can use encoded newlines , but that's probably even less desirable than using <br>'s.

answered Jan 15 '13 at 23:35

Chad von Nau

4,316
1
23
34

1

Now how do you do that with a popover. – aaa90210 Jul 03 '15 at 00:36
1

@aaa90210 you could try `.popover-content { white-space:pre-wrap; }`. Depending on your content, `.popover-content p { white-space:pre-wrap; }` or something similar, might look better. – Chad von Nau Jul 03 '15 at 01:31
Is it possible to show JSP variables in tooltip like this? I have tried `Show`. But it gives this: aaabbbccc (concatenated strings). – zygimantus Nov 04 '15 at 12:16
1

.tooltip-inner { white-space:pre-line;} working for me. – Kishor K Jun 12 '17 at 17:07
pre-line worked for me - all others made text not align properly – Adam Moisa Jul 14 '17 at 17:39
Note that 013 doesn't work for newlines in case u are trying to use this type of character. I had to use instead – WtFudgE Oct 09 '19 at 12:56

Costales · Answer 2 · 2014-06-02T12:55:58.567

229

You can use the html property: http://jsfiddle.net/UBr6c/

My <a href="#" title="This is a<br />test...<br />or not" class="my_tooltip">Tooltip</a> test.

$('.my_tooltip').tooltip({html: true})

edited Jun 02 '14 at 12:55

answered Jan 11 '13 at 15:25

Costales

2,799
1
17
21

2

You haven't checked `Bootstrap 2.0.2 (js only)` option in your jsFiddle, which makes it not working at initial run (open). Mark and save it, so other won't comply, that your example doesn't work. – trejder Jan 29 '14 at 14:15

score 61 · Answer 3 · answered Jan 29 '14 at 14:25

61

If you're using Twitter Bootstrap Tooltip on non-link element, you can specify, that you want a multi-line tooltip directly in HTML code, without Javascript, using just the data parameter:

<span rel="tooltip" data-html="true" data-original-title="1<br />2<br />3">5</span>

This is just an alternative version of costales' answer. All the glory goes to him! :]

answered Jan 29 '14 at 14:25

trejder

17,148
27
124
216

2

Why do you say "non-link element"? I tried this on a link and it seemed to work fine. – ec2011 Jun 02 '14 at 09:26
2

Well... I don't remember! :] After five months, I think I was wrong. I also don't know, why it shouldn't be working on links. Sorry... – trejder Jun 02 '14 at 12:57
1

This one worked for me, specially if you are triggering tooltips with javascript, this will be loaded in the element itself, thanks ! – Leo Oct 02 '18 at 15:14

chakming · Answer 4 · 2014-07-02T03:46:06.303

15

If you are using Angular UI Bootstrap, you can use tooltip with html syntax: tooltip-html-unsafe

e.g. update to angular 1.2.10 & angular-ui-bootstrap 0.11: http://jsfiddle.net/aX2vR/1/

old one: http://jsfiddle.net/8LMwz/1/

edited Jul 02 '14 at 03:46

answered Nov 20 '13 at 04:28

chakming

390
5
18

score 2 · Answer 5 · answered Sep 04 '15 at 18:08

In Angular UI Bootstrap 0.13.X, tooltip-html-unsafe has been deprecated. You should now use tooltip-html and $sce.trustAsHtml() to accomplish a tooltip with html.

https://github.com/angular-ui/bootstrap/commit/e31fcf0fcb06580064d1e6375dbedb69f1c95f25

<a href="#" tooltip-html="htmlTooltip">Check me out!</a>

$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');

score 1 · Answer 6 · answered Jan 03 '19 at 11:08

1

The CSS solution for Angular Bootstrap is

::ng-deep .tooltip-inner {
  white-space: pre-wrap;
}

No need to use a parent element or class selector if you don't need to restrict it's use. Copy/Pasta, and this rule will apply to all sub-components

answered Jan 03 '19 at 11:08

Antonis

647
6
15

How to make Twitter Bootstrap tooltips have multiple lines?

6 Answers6

Linked

Related