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

68

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">
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
2

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
1
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