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

Question

我目前正在使用下面的函数来创建文本，这些文本将使用Bootstrap的工具提示插件显示。为什么多行工具提示只适用于

什么有效

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

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

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

这只是costales回答的另一个版本。所有的荣耀都属于他！：]

Answer 2

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

My

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

Answer 3

您可以在工具提示上使用的空白：pre-包装。这将使工具提示尊重新行。如果行长于容器的默认最大宽度，则行仍将换行。

.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，它们实际上必须是实际的换行符。或者，您可以使用编码的换行符