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

时间:2013-09-25 09:57:57

标签: jquery twitter-bootstrap twitter-bootstrap-3

我正在使用Bootstrap 3并在我的div中添加了一个工具提示。我试过用< br> \ n和
创建新行。 Bootstrap会阻止我吗?

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

2 个答案:

答案 0 :(得分:185)

您需要将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

答案 1 :(得分:2)

在标题中使用此代码来打破界限:&#13;

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