up vote 129 down vote favorite
23

I am currently using the below function to create text that will be displayed using bootstrap's tooltip plugin. How come multiline tooltips only works 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
share|improve this question
1  
Do you understand the difference between \n and <br/> in HTML? – Cole Johnson Nov 12 '12 at 5:36
2  
<br/> will work on html rendering side, while /n will only display your html code in new line – rajesh kakawat Nov 12 '12 at 5:51
    
I was looking at some other websites and they have multiline tooltips without the br – Matthew Hui Nov 12 '12 at 6:00
up vote 224 down vote accepted

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 &#013;, but that's probably even less desirable than using <br>'s.

share|improve this answer
1  
Now how do you do that with a popover. – aaa90210 Jul 3 '15 at 0: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 3 '15 at 1:31
    
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). – zygimantus Nov 4 '15 at 12:16
    
Thanks for explaining both! – devo Apr 18 at 17:02
1  
.tooltip-inner { white-space:pre-line;} working for me. – Kishor K Jun 12 at 17:07
up vote 187 down vote

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})
share|improve this answer
    
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
2  
html: true + &#013; work for me ! – CheapD AKA Ju Jul 2 '14 at 11:22
10  
This is the correct answer – Sam Jan 13 '15 at 11:04
4  
this should be the accepted answer. – rafi Jul 1 '15 at 6:37
2  
This is still the right answer.... – Francisco Caviano Mar 23 '16 at 2:11
up vote 43 down vote

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

share|improve this answer
1  
Why do you say "non-link element"? I tried this on a link and it seemed to work fine. – ec2011 Jun 2 '14 at 9:26
1  
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 2 '14 at 12:57
2  
This is the best and simplest answer. Works for me. – HerrimanCoder Jul 1 '16 at 13:06
up vote 15 down vote

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/

share|improve this answer
up vote 1 down vote

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>!');
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.