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

157

我目前正在使用以下功能来创建将通过Bootstrap的工具提示插件显示的文本。多行工具提示如何只能使用 而不能使用\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

— 马修辉
source

1

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

— 科尔·约翰逊

2

将在html呈现

— 端起作用

我在看其他网站，但他们有多行提示，而没有br

— Matthew Hui

265

您可以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中使用，它们实际上必须是实际的换行符。另外，您也可以使用编码的换行符，但这可能不如使用 s 理想。

— 乍得冯瑙
source

1

现在，您如何使用弹出窗口做到这一点。

— aaa90210 2015年

1

@ 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（连接的字符串）。

— zygimantus

1

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

— Kishor K

前行对我

— 有用

221

您可以使用html属性：http : //jsfiddle.net/UBr6c/

My <a href="#" title="This is a test... or not" class="my_tooltip">Tooltip</a> test.

$('.my_tooltip').tooltip({html: true})

— Costales
source

1

您尚未Bootstrap 2.0.2 (js only)在jsFiddle中选中选项，这使其在初次运行（打开）时不起作用。标记并保存它，以免其他示例不起作用，以至于您的示例无效。

— trejder 2014年

56

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

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

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

— 特雷德
source

2

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

— ec2011 2014年

2

好吧...我不记得了！：]五个月后，我认为我错了。我也不知道，为什么它不应该在链接上工作。抱歉...

— trejder 2014年

1

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

— 狮子座

16

如果您使用的是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/

— km
source

2

在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>!');

— 苏特
source

0

Angular Bootstrap的CSS解决方案是

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

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

— 安东尼斯
source