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

Question

164

我目前正在使用以下函数创建文本，该文本将使用Bootstrap的工具提示插件显示。为什么多行工具提示只能使用 而不能使用\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

- Matthew Hui

1

你了解HTML中\n和 的区别吗？ - Cole Tobin

2

会在 HTML 渲染方面起作用，而 /n 只会将你的 HTML 代码显示在新行上。 - rajesh kakawat

我正在查看其他网站，它们有多行工具提示而不需要使用br标签。 - Matthew Hui

6个回答

229

你可以使用html属性：http://jsfiddle.net/UBr6c/

我的<a href="#" title="这是一个 测试... 或不是" class="my_tooltip">工具提示</a>测试。

$('.my_tooltip').tooltip({html: true})

- Costales

2

你在jsFiddle中没有勾选Bootstrap 2.0.2 (js only)选项，这会导致它在初始运行（打开）时无法工作。请标记并保存它，以便其他人不会抱怨你的示例无法工作。 - trejder

61

如果您正在非链接元素上使用 Twitter Bootstrap 工具提示，您可以直接在 HTML 代码中指定希望使用多行工具提示，而无需使用 Javascript，只需使用 data 参数：

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

这只是costales回答的另一种替代版本。所有的荣耀归于他！：]

- trejder

2

为什么要说“非链接元素”？我在链接上尝试了一下，似乎也可以正常工作。 - ec2011

2

嗯...我不记得了！:] 五个月后，我想我错了。我也不知道为什么它在链接上不能工作。抱歉... - trejder

1

这个对我很有用，特别是如果你正在使用JavaScript触发工具提示，它将在元素本身中加载，谢谢！ - Leo

15

如果您正在使用 Angular UI Bootstrap，您可以使用带有 HTML 语法的工具提示：`tooltip-html-unsafe`。

例如：升级到 Angular 1.2.10 和 angular-ui-bootstrap 0.11 的代码示例：http://jsfiddle.net/aX2vR/1/ 旧版本的代码示例：http://jsfiddle.net/8LMwz/1/

- chakming

2

在 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>!');

- soote

1

“Angular Bootstrap的CSS解决方案是”

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

如果您不需要限制使用，则无需使用父元素或类选择器。复制/粘贴，此规则将适用于所有子组件。

- Antonis

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chad von Nau · Accepted Answer

你可以在工具提示上使用white-space:pre-wrap。这将使工具提示遵循新行。如果行比容器的默认最大宽度长，它们仍然会被换行。

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

如果您想防止文本换行，请改用以下方法。

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

无论哪种方法，在HTML中使用\n都不起作用，必须使用实际的换行符。或者，您可以使用编码的换行符，但这可能比使用 更不可取。