如何使Twitter引导工具提示有多行？

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 工具提示，您可以使用{{1指定，您希望直接在HTML代码中使用多行工具提示而不使用Javascript参数：

data

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

Answer 4

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

e.g。 更新为角度1.2.10＆amp; 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;
}

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