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

javascript html css twitter-bootstrap

2022-08-30 02:23:09

我目前正在使用以下函数创建将使用Bootstrap的工具提示插件显示的文本。为什么多行工具提示只能使用而不能使用？我更喜欢我的链接的标题属性中没有任何HTML。<br>\n

什么有效

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

答案 1

您可以在工具提示上使用。这将使工具提示尊重新行。如果行的长度超过容器的默认最大宽度，它们仍将换行。white-space:pre-wrap

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

如果要防止文本换行，请改为执行以下操作。

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

这些都不能与html中的a一起使用，它们实际上必须是实际的换行符。或者，您可以使用编码的换行符，但这可能比使用 's 更不可取。\n<br>

答案 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})