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

javascript html css twitter-bootstrap

我目前正在使用以下函数来创建将使用 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

你了解 HTML 中 \n 和
的区别吗？

将在 html 渲染端工作，而 /n 只会在新行中显示您的 html 代码

我正在查看其他一些网站，它们有没有 br 的多行工具提示

Chad von Nau

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

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

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

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

这些都不适用于 html 中的 \n，它们实际上必须是实际的换行符。或者，您可以使用编码换行符 ，但这可能比使用 <br> 更不理想。

现在你如何使用弹出框来做到这一点。

@aaa90210 你可以试试 .popover-content { white-space:pre-wrap; }。根据您的内容，.popover-content p { white-space:pre-wrap; } 或类似内容可能看起来更好。

是否可以像这样在工具提示中显示 JSP 变量？我试过 <a href="#" rel="tooltip" title="${aaa} ${bbb} ${ccc}" class="example">Show</a>。但它给出了这个：aaabbbccc（连接字符串）。

.tooltip-inner { white-space:pre-line;} 为我工作。

预行对我有用 - 所有其他人都使文本无法正确对齐

Costales

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

您尚未在 jsFiddle 中检查 Bootstrap 2.0.2 (js only) 选项，这使其在初始运行（打开）时无法正常工作。标记并保存它，这样其他人就不会遵守，你的例子不起作用。

trejder

如果您在非链接元素上使用 Twitter Bootstrap 工具提示，则可以直接在 HTML 代码中指定多行工具提示，无需 Javascript，仅使用 data 参数：

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

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

为什么说“非链接元素”？我在一个链接上试过这个，它似乎工作正常。

嗯……我不记得了！ :] 五个月后，我想我错了。我也不知道，为什么它不应该在链接上工作。对不起...

这对我有用，特别是如果您使用 javascript 触发工具提示，它将被加载到元素本身中，谢谢！

chakming

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

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

soote

在 Angular UI Bootstrap 0.13.X 中，tooltip-html-unsafe 已被弃用。您现在应该使用 tooltip-html 和 $sce.trustAsHtml() 来完成带有 html 的工具提示。

<a href="#" tooltip-html="htmlTooltip">Check me out!</a>

$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');

Antonis

Angular Bootstrap 的 CSS 解决方案是

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

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