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

Posted 2023-02-22

【中文标题】如何使 Twitter Bootstrap 工具提示有多行？

【英文标题】：How to make Twitter Bootstrap tooltips have multiple lines?

【发布时间】：2012-10-31 14:03:06

【问题描述】：

我目前正在使用以下函数来创建将使用 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 的多行工具提示

【参考方案1】：

您可以在工具提示上使用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/

这些都不能与 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; 为我工作。

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

【参考方案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)

【讨论】：

您没有检查 jsFiddle 中的 Bootstrap 2.0.2 (js only) 选项，这使得它在初始运行（打开）时不起作用。标记并保存它，以免其他人不遵守，您的示例不起作用。

【参考方案3】：

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

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

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

【讨论】：

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

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

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

【参考方案4】：

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

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

老一：http://jsfiddle.net/8LMwz/1/

【参考方案5】：

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

https://github.com/angular-ui/bootstrap/commit/e31fcf0fcb06580064d1e6375dbedb69f1c95f25

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

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

【参考方案6】：

Angular Bootstrap 的 CSS 解决方案是

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

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