如何使Twitter的引导工具提示有多行？

我目前使用下面的函数来创build将使用引导的工具提示插件显示的文本。如何多行工具提示只适用于<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在工具提示上white-space:pre-wrap行。这将使工具提示尊重新的路线。如果行长度大于容器的默认最大宽度，行将仍然包装。

 .tooltip-inner { white-space:pre-wrap; }

如果您想防止文字换行，请执行以下操作。

 .tooltip-inner { white-space:pre; max-width:none; }

这两个都不会在html中使用\n ，它们实际上必须是实际的换行符。或者，您可以使用编码的换行符 ，但这可能比使用中文更不可取。

您可以使用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

例如更新到angular1.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的工具提示。

 <a href="#" tooltip-html="htmlTooltip">Check me out!</a> $scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');