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

我正在使用Bootstrap 3，并向div中添加了一个工具提示。我尝试使用<br> \ n和＆＃013; 创建新行。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

— 皮尔斯·麦克杰夫
source

Answers:

215

您需要添加data-html="true"到标记中。

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

工作演示：http : //www.bootply.com/83099

— 齐姆
source

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

— Pierce McGeough 2013年

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

— Jon Schneider

谢谢你，我在文档中都看不到data-html =“ true”

— dtc 2015年

如何从javascript激活它？

— Behzad

对于6年后仍在寻找的任何人，您可以在此处

— MickelsonMichael

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

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

— Thalles Noce
source

这可行，但是在我的新行的开头添加了一个空格字符。看来＆＃10; 做同样的事情，但是没有这个前空格字符。

— mike123'5