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

【问题标题】：Add line break to tooltip in Bootstrap 3在 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">

【问题讨论】：

标签： jquery twitter-bootstrap twitter-bootstrap-3

【解决方案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 &#013; - Item 2 &#013;"

CSS

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

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

【讨论】：

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