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

2020/10/29 23:23 · javascript ·  · 0评论

我目前正在使用以下功能来创建将通过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

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

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

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

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

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

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

Angular Bootstrap的CSS解决方案是

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

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

本文地址:http://javascript.askforanswer.com/ruheshitwitter-bootstrapgongjutishiyouduoxing.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!