我目前正在使用下面的函数来创建文本,这些文本将使用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
发布于 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>
的换行符更不可取。
发布于 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})
发布于 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/
https://stackoverflow.com/questions/13338780
复制相似问题