在 Bootstrap 3 中向工具提示添加换行符

Posted 2023-05-08

【中文标题】在 Bootstrap 3 中向工具提示添加换行符

【英文标题】：Add line break to tooltip in Bootstrap 3

【发布时间】：2013-09-30 20:36:54

【问题描述】：

我正在使用 Bootstrap 3 并在我的 div 中添加了一个工具提示。我试过使用 \n 和 创建新行。 Bootstrap 阻止我会不会有问题？

<div class="content show-tooltip" data-placement="top" 
     data-original-title="1st line of text <br> 2nd line of text">

【参考方案1】：

您需要在标记中添加data-html="true"..

<div class="content show-tooltip" data-html="true" data-placement="top" 
     title="1st line of text <br> 2nd line of text">

工作演示：https://codeply.com/p/C8083WXo5Z

【讨论】：

非常感谢。是否有关于这些数据属性的文档？

我在这里找到了文档（他们移动了吗？）：getbootstrap.com/javascript/#popovers-options

谢谢，我在文档中的任何地方都没有看到 data-html="true"

对于 6 年后仍在寻找的任何人，您可以找到 v3.4 的数据属性文档here

@Chris - 阅读docs.. 看看“html”选项

【参考方案2】：

在标题中使用以下代码换行：

HTML

...title="- Item 1 
 - Item 2 
"

CSS

.ui-tooltip 
    /* tooltip container box */
    white-space: pre-line;


.ui-tooltip-content 
    /* tooltip content */
    white-space: pre-line;

【讨论】：

这行得通，但这会在我的新行的开头添加一个空格字符。看来 做同样的事情，但没有这个前面的空格字符。