How to make Twitter Bootstrap tooltips have multiple lines?
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
in HTML?
will work on html rendering side, while /n will only display your html code in new line
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.
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})
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.
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! :]
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/
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>!');
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
Follow WeChat
Success story sharing
Want to stay one step ahead of the latest teleworks?
Subscribe Now相似问题
- How can I make a div not larger than its contents?
- How do I make the first letter of a string uppercase in JavaScript?
- How can I select an element with multiple classes in jQuery?
- How to make a div 100% height of the browser window
- How to make Twitter Bootstrap menu dropdown on hover rather than click
- How do I bind Twitter Bootstrap tooltips to dynamically created elements?
- Font scaling based on width of container
- Center a column using Twitter Bootstrap 3
- How can I make Bootstrap columns all the same height?
- Is it possible to apply CSS to half of a character?
.popover-content { white-space:pre-wrap; }. Depending on your content,.popover-content p { white-space:pre-wrap; }or something similar, might look better.<a href="#" rel="tooltip" title="${aaa} ${bbb} ${ccc}" class="example">Show</a>. But it gives this: aaabbbccc (concatenated strings).