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

Do you understand the difference between \n and <br/> in HTML? — Cole Johnson
<br/> will work on html rendering side, while /n will only display your html code in new line — rajesh kakawat
I was looking at some other websites and they have multiline tooltips without the br — Matthew Hui

Chad von Nau Chad von Nau · Accepted Answer · 2013-01-15T23:35:45

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.

How to make Twitter Bootstrap tooltips have multiple lines?

6 Answers