Fügen Sie dem Tooltip in Bootstrap 3 einen Zeilenumbruch hinzu

Ich verwende Bootstrap 3 und habe meinem div einen Tooltip hinzugefügt. Ich habe versucht, <br> \ n und & # 013; um die neue Zeile zu erstellen. Wäre es ein Problem, wenn der Bootstrap mich aufhalten würde?

<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

— Pierce McGeough
quelle

Antworten:

215

Sie müssen data-html="true"dem Markup hinzufügen .

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

Arbeitsdemo: http://www.bootply.com/83099

— Zim
quelle

Das ist großartig, danke. Gibt es Dokumente zu diesen Datenattributen?

— Pierce McGeough

Ich habe die Dokumente hier gefunden (sind sie umgezogen

— Jon Schneider

danke dafür, ich sehe data-html = "true" nirgendwo in den Dokumenten tho

— dtc

Wie kann ich es aus Javascript aktivieren?

— Behzad

Für alle, die noch 6 Jahre später suchen, finden Sie die Dokumentation zu Datenattributen für v3.4 hier

— MickelsonMichael

Verwenden Sie im Titel diesen Code, um die Zeile zu unterbrechen:

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
quelle

Dies funktioniert, fügt jedoch am Anfang meiner neuen Zeile ein Leerzeichen hinzu. Es scheint & # 10; Machen Sie dasselbe, aber ohne diesen Front Space-Charakter.

— Mike123