[英]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. 我目前正在使用以下函数来创建将使用Bootstrap的工具提示插件显示的文本。 How come multiline tooltips only work with
<br>
and not \\n
? 为什么多行工具提示只适用于
<br>
而不是\\n
? I prefer that there is not any HTML in my links' title attributes. 我更喜欢链接的标题属性中没有任何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
You can use white-space:pre-wrap
on the tooltip. 您可以使用
white-space:pre-wrap
工具提示。 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/ 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/ http://jsfiddle.net/chad/TSZSL/53/
Neither of these will work with a \\n
in the html, they must actually be actual newlines. 这些都不
\\n
于html中的\\n
,它们实际上必须是实际的换行符。 Alternatively, you can use encoded newlines 
或者,您可以使用编码换行符

, but that's probably even less desirable than using <br>
's. ,但这可能比使用
<br>
更不可取。
你可以使用html属性: 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})
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: 如果您在非链接元素上使用Twitter Bootstrap Tooltip,您可以使用
data
参数指定,您需要直接在HTML代码中使用多行工具提示而不使用Javascript:
<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. 这只是costales答案的替代版本。 All the glory goes to him!
所有的荣耀归于他! :]
:]
If you are using Angular UI Bootstrap, you can use tooltip with html syntax: tooltip-html-unsafe
如果您使用的是Angular UI Bootstrap,则可以使用带有html语法的
tooltip-html-unsafe
: tooltip-html-unsafe
eg update to angular 1.2.10 & angular-ui-bootstrap 0.11: http://jsfiddle.net/aX2vR/1/ 例如更新到角1.2.10&angular-ui-bootstrap 0.11: http : //jsfiddle.net/aX2vR/1/
old one: http://jsfiddle.net/8LMwz/1/ 旧的: http : //jsfiddle.net/8LMwz/1/
In Angular UI Bootstrap 0.13.X, tooltip-html-unsafe has been deprecated. 在Angular UI Bootstrap 0.13.X中,不推荐使用tooltip-html-unsafe。 You should now use tooltip-html and $sce.trustAsHtml() to accomplish a tooltip with html.
您现在应该使用tooltip-html和$ sce.trustAsHtml()来完成带有html的工具提示。
https://github.com/angular-ui/bootstrap/commit/e31fcf0fcb06580064d1e6375dbedb69f1c95f25 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 Angular Bootstrap的CSS解决方案是
::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
复制/意大利面,此规则将适用于所有子组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.