Problem
To create text that will be displayed using Bootstrap’s tooltip plugin, I’m currently using the method below. Why do multiline tooltips only work with br> rather than n? I like that the title attributes of my links contain no HTML.
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
Asked by Matthew Hui
Solution #1
On the tooltip, you can use white-space:pre-wrap. The tooltip will now respect new lines. Lines will still wrap if they are longer than the container’s default max-width.
.tooltip-inner {
white-space:pre-wrap;
}
http://jsfiddle.net/chad/TSZSL/52/
Instead, if you wish to keep text from wrapping, do the following.
.tooltip-inner {
white-space:pre;
max-width:none;
}
http://jsfiddle.net/chad/TSZSL/53/
Both of these will not work if the html contains a n; they must be newlines. You can also use encoded newlines , but that’s probably less convenient than using br>s.
Answered by Chad von Nau
Solution #2
The html property may be found at http://jsfiddle.net/UBr6c/.
My a href=”#” title=”This is abr />test…br />or not” class=”my tooltip”>a href=”#” title=”This is abr />test…br />or not” class=”my tooltip”>a href=”#” title=”This is ab Test the tooltip/a>
$('.my_tooltip').tooltip({html: true})
Answered by Costales
Solution #3
If you’re using Twitter Bootstrap Tooltip on a non-link element, you may specify a multi-line tooltip directly in HTML code, without having to use Javascript, by specifying the data parameter:
<span rel="tooltip" data-html="true" data-original-title="1<br />2<br />3">5</span>
This is just a different take on Costales’ response. He deserves all the credit! :]
Answered by trejder
Solution #4
If you’re using Angular UI Bootstrap, you can use the following HTML syntax to create a tooltip: tooltip-html-unsafe
Update to Angular 1.2.10 and angular-ui-bootstrap 0.11, for example: http://jsfiddle.net/aX2vR/1/
old one: http://jsfiddle.net/8LMwz/1/
Answered by chakming
Solution #5
Tooltip-html-unsafe has been deprecated in Angular UI Bootstrap 0.13.X. To create an html tooltip, you should now use tooltip-html and $sce.trustAsHtml().
<a href="#" tooltip-html="htmlTooltip">Check me out!</a>
$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');
Answered by soote
Post is based on https://stackoverflow.com/questions/13338780/how-to-make-twitter-bootstrap-tooltips-have-multiple-lines