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

【问题标题】：How to make Twitter Bootstrap tooltips have multiple lines?如何使 Twitter Bootstrap 工具提示有多行？
【发布时间】：2012-10-31 14:03:06
【问题描述】：

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

【问题讨论】：

【解决方案1】：

您可以在工具提示上使用white-space:pre-wrap。这将使工具提示尊重新行。如果行长于容器的默认最大宽度，行仍然会换行。

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

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

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

这些都不能与 html 中的 \n 一起使用，它们实际上必须是实际的换行符。或者，您可以使用编码换行符 &#013;，但这可能比使用 <br> 更不理想。

【讨论】：

现在你如何使用弹出框来做到这一点。
@aaa90210 你可以试试.popover-content { white-space:pre-wrap; }。根据您的内容，.popover-content p { white-space:pre-wrap; } 或类似内容可能看起来更好。
是否可以像这样在工具提示中显示 JSP 变量？我试过<a href="#" rel="tooltip" title="${aaa} ${bbb} ${ccc}" class="example">Show</a>。但它给出了这个：aaabbbccc（连接字符串）。
.tooltip-inner { white-space:pre-line;} 为我工作。
前行对我有用 - 所有其他人都使文本无法正确对齐

【解决方案2】：

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

【讨论】：

您没有检查 jsFiddle 中的 Bootstrap 2.0.2 (js only) 选项，这使得它在初始运行（打开）时不起作用。标记并保存它，以免其他人不遵守，您的示例不起作用。

【解决方案3】：

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

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

这只是 costales 答案的替代版本。所有的荣耀都归于他！ :]

【讨论】：

【解决方案4】：

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

例如更新到 angular 1.2.10 和 angular-ui-bootstrap 0.11： http://jsfiddle.net/aX2vR/1/

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

Angular Bootstrap 的 CSS 解决方案是

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

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

【讨论】：