如何让 Bootstrap 提示有多行？

我目前正在使用下面的函数来创建文本，将显示使用 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
142700 次浏览
小开

可以使用 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})
小开
最佳答案

您可以在工具提示中使用 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，它们必须是实际的换行。或者，您可以使用编码的换行 &#013;，但是这可能比使用 <br>更不可取。

小开

如果您正在使用角用户界面引导程序，您可以使用 HTML 语法的工具提示: tooltip-html-unsafe

例如:。 更新到角度1.2.10和角度 -ui-bootstrap 0.11: Http://jsfiddle.net/ax2vr/1/

旧的: http://jsfiddle.net/8LMwz/1/

小开

如果你在非链接元素上使用 Bootstrap工具提示，你可以指定，你想要一个多行工具提示直接在 HTML 代码中，没有 Javascript，只使用 data参数:

<span rel="tooltip" data-html="true" data-original-title="1<br />2<br />3">5</span>

这只是 Costales答案的另一个版本。所有的荣耀都属于他! : ]

小开

在 Angular UI Bootstrap 0.13.X 中，工具提示 html 不安全已被弃用。现在，您应该使用 tooltip-html 和 $sce.trust AsHtml ()来使用 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>!');
小开

角引导的 CSS 解决方案是

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

如果不需要限制父元素或类选择器的使用，则不需要使用它们。 复制/意大利面，这个规则将适用于所有子组件


提交答案