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

Question

我正在使用Bootstrap 3，并向我的

元素添加了一个工具提示。我尝试使用<br>\n和&#013;来创建换行。这会是Bootstrap阻止我做到这一点的问题吗？

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

- Pierce McGeough

Answer 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

- Zim

---

我在这里找到了文档（它们是否已经移动？）：http://getbootstrap.com/javascript/#popovers-options - Jon Schneider

感谢您的回复，但是我在文档中没有看到 data-html="true" 的任何内容。 - dtc

对于仍在寻找的任何人，您可以在v3.4 此处找到数据属性的文档。 - MichaelM

@Chris - 阅读文档。查看“html”选项。 - Carol Skelly

对于使用Bootstrap v5的任何人：data-bs-html="true" - undefined

Answer 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;
}

- Thalles Noce

---

这个可以工作，但是它在我的新行开头添加了一个空格字符。似乎 做同样的事情，但没有这个前置空格字符。 - mike123