如何使 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

Answer 1

您可以在工具提示上使用

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

，它们实际上必须是实际的换行符。或者，您可以使用编码换行符




，但这可能比使用

<br>

更不可取。

Answer 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})

Answer 3

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

data

参数：

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

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

Answer 4

如果您使用 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/

Answer 5

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

Answer 6

Angular Bootstrap 的 CSS 解决方案是

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

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

Answer 7

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-html="true" data-bs-title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
  Tooltip with HTML
</button>