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

如果要阻止文本换行,请执行以下操作.

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

这些都不适用\n于html,它们实际上必须是实际的换行符.或者,你可以使用编码换行符,但这可能比使用它更不可取<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})

`html:true` +``为我工作! (3认同)
您尚未在 jsFiddle 中检查“Bootstrap 2.0.2（仅 js）”选项，这使得它在初始运行（打开）时无法工作。标记并保存它，这样其他人就不会遵守，你的例子就不起作用。 (2认同)

Answer 3

如果您在非链接元素上使用Twitter Bootstrap Tooltip,您可以使用以下data参数指定:您需要直接在HTML代码中使用多行工具提示而不使用Javascript :

<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

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