[英]How to make Twitter Bootstrap tooltips have multiple lines?
我目前正在使用以下函数来创建将使用Bootstrap的工具提示插件显示的文本。 为什么多行工具提示只适用于<br>
而不是\\n
? 我更喜欢链接的标题属性中没有任何HTML。
什么有效
def tooltip(object)
tooltip = ""
object.each do |user|
tooltip += "#{user.identifier}" + "<br>"
end
return tooltip
end
我想要的是
def tooltip(object)
tooltip = ""
object.each do |user|
tooltip += "#{user.identifier}" + "\n"
end
return tooltip
end
您可以使用white-space:pre-wrap
工具提示。 这将使工具提示尊重新线。 如果行长度超过容器的默认最大宽度,则行仍将换行。
.tooltip-inner {
white-space:pre-wrap;
}
http://jsfiddle.net/chad/TSZSL/52/
如果要阻止文本换行,请执行以下操作。
.tooltip-inner {
white-space:pre;
max-width:none;
}
http://jsfiddle.net/chad/TSZSL/53/
这些都不\\n
于html中的\\n
,它们实际上必须是实际的换行符。 或者,您可以使用编码换行符
,但这可能比使用<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})
如果您在非链接元素上使用Twitter Bootstrap Tooltip,您可以使用data
参数指定,您需要直接在HTML代码中使用多行工具提示而不使用Javascript:
<span rel="tooltip" data-html="true" data-original-title="1<br />2<br />3">5</span>
这只是costales答案的替代版本。 所有的荣耀归于他! :]
如果您使用的是Angular UI Bootstrap,则可以使用带有html语法的tooltip-html-unsafe
: tooltip-html-unsafe
例如更新到角1.2.10&angular-ui-bootstrap 0.11: http : //jsfiddle.net/aX2vR/1/
旧的: http : //jsfiddle.net/8LMwz/1/
在Angular UI Bootstrap 0.13.X中,不推荐使用tooltip-html-unsafe。 您现在应该使用tooltip-html和$ sce.trustAsHtml()来完成带有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>!');
Angular Bootstrap的CSS解决方案是
::ng-deep .tooltip-inner {
white-space: pre-wrap;
}
如果您不需要限制它的使用,则无需使用父元素或类选择器。 复制/意大利面,此规则将适用于所有子组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.