Comment faire de Twitter bootstrap infobulles avoir plusieurs lignes ?

Question

Je suis actuellement en utilisant le dessous de fonction pour créer un texte qui sera affiché à l’aide de plugin tooltip de bootstrap. Comment se fait-il des info-bulles multiligne ne fonctionne qu’avec et pas ? Je préfère qu’il n’y a pas de code html dans les attributs de titre des mes liens.

Ce qui fonctionne

Ce que je veux

Answer 1

Vous pouvez utiliser white-space:pre-wrap sur l'info-bulle. Cela permettra de faire de l'info-bulle égard, de nouvelles lignes. Les lignes seront encore de retour si ils sont plus longs que la valeur par défaut de max-largeur du conteneur.

.tooltip-inner {
    white-space:pre-wrap;
}

http://jsfiddle.net/chad/TSZSL/52/

Si vous voulez empêcher que le texte de l'emballage, procédez de la manière suivante à la place.

.tooltip-inner {
    white-space:pre;
    max-width:none;
}

http://jsfiddle.net/chad/TSZSL/53/

Aucune de ces travaillera avec un \n dans le html, il doit être réel les retours à la ligne. Alternativement, vous pouvez utiliser des retours à la ligne codée 
, mais c'est probablement encore moins souhaitable que l'utilisation d' <br>'.

Answer 2

Vous pouvez utiliser la propriété html : http://jsfiddle.net/UBr6c/

``

Answer 3

Si vous êtes en utilisant Twitter Bootstrap info-bulle sur l’élément non-link, vous pouvez spécifier, que vous voulez une info-bulle multiligne directement dans le code HTML, sans Javascript, en utilisant juste la `` paramètre :

C’est juste une version alternative de costales"réponse. Toute la gloire va à lui ! :]

Answer 4

Si vous utilisez angulaire UI Bootstrap, vous pouvez utiliser l’info-bulle avec la syntaxe html :``

par exemple, mettre à jour à angulaire 1.2.10 & angulaire-ui-bootstrap 0,11 : http://jsfiddle.net/aX2vR/1/

ancien : http://jsfiddle.net/8LMwz/1/