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

Bimbo

Do you understand the difference between \n and <br/> in HTML? – Perihelion

<br/> will work on html rendering side, while /n will only display your html code in new line – Purtenance

I was looking at some other websites and they have multiline tooltips without the br – Bimbo

Answer 1

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.

Burkholder

Now how do you do that with a popover. – Claustral

@Claustral 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. – Burkholder

Is it possible to show JSP variables in tooltip like this? I have tried <a href="#" rel="tooltip" title="${aaa} ${bbb} ${ccc}" class="example">Show</a>. But it gives this: aaabbbccc (concatenated strings). – Lashondalashonde

.tooltip-inner { white-space:pre-line;} working for me. – Resendez

pre-line worked for me - all others made text not align properly – Insupportable

Note that 013 doesn't work for newlines in case u are trying to use this type of character. I had to use &#10; instead – Cub

Answer 2

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})

Franck

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. – Doone

Answer 3

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! :]

Doone

Why do you say "non-link element"? I tried this on a link and it seemed to work fine. – Pina

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... – Doone

This one worked for me, specially if you are triggering tooltips with javascript, this will be loaded in the element itself, thanks ! – Reticle

Answer 4

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/

Child

Answer 5

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>!');

Leslie

Answer 6

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

Jeneejenei