如何使Twitter的 bootstrap工具提示有多行?

  • 回答 (2)
  • 关注 (0)
  • 查看 (9)

我目前使用下面的函数来创建将使用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
m9747785m9747785提问于
WOW彩笔er回答于

你可以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/

这些都不能\n在html中使用,它们实际上必须是实际的换行符。或者,你可以使用编码换行符&#013;,但这可能比使用<br>'s 更不理想。

青蛙克星哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈回答于

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

扫码关注云+社区