如何让Twitter Bootstrap工具提示有多行？
如何让Twitter Bootstrap工具提示有多行？
提问于 2012-11-12 13:25:43
我目前正在使用下面的函数来创建文本，这些文本将使用Bootstrap的工具提示插件来显示。为什么多行工具提示只适用于<br>而不适用于\n？我希望我的链接的title属性中没有任何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回答 5
Stack Overflow用户
回答已采纳
发布于 2013-01-16 07:35:46
可以使用工具提示上的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/
这两个都不能与html中的\n一起工作，它们实际上必须是实际的换行符。或者，您可以使用编码的换行符
，但这可能比使用<br>的换行符更不可取。
Stack Overflow用户
发布于 2013-01-11 23:25:19
您可以使用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})Stack Overflow用户
发布于 2013-11-20 12:28:44
如果您使用的是Angular UI Bootstrap，则可以使用带有HTML语法的工具提示：tooltip-html-unsafe
例如，更新到angular 1.2.10 & angular-ui-bootstrap 0.11：http://jsfiddle.net/aX2vR/1/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13338780
复制相关文章
相似问题
腾讯云开发者
