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

Question

我目前正在使用以下函数来创建将使用 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

score 271 · Accepted Answer

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

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

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

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

这些都不能与\nhtml 中的 a 一起使用，它们实际上必须是实际的换行符。或者，您可以使用编码的换行符，但这可能比使用<br>'s 更不可取。

score 226 · Accepted Answer

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

score 59 · Accepted Answer

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

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

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

score 15 · Accepted Answer

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

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

score 2 · Accepted Answer

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

score 0 · Accepted Answer

Angular Bootstrap 的 CSS 解决方案是

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

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

6 回答 6