Comment faire en sorte que les info-bulles Twitter Bootstrap aient plusieurs lignes?

157

J'utilise actuellement la fonction ci-dessous pour créer du texte qui sera affiché à l'aide du plugin d'info-bulle de Bootstrap. Comment se fait-il que les info-bulles multilignes ne fonctionnent qu'avec <br>et non \n? Je préfère qu'il n'y ait pas de HTML dans les attributs de titre de mes liens.

Ce qui fonctionne

def tooltip(object)
  tooltip = ""
  object.each do |user|
    tooltip += "#{user.identifier}" + "<br>"
  end
  return tooltip
end

Ce que je veux

def tooltip(object)
   tooltip = ""
   object.each do |user|
     tooltip += "#{user.identifier}" + "\n"
   end
   return tooltip
 end
javascript html css twitter-bootstrap Matthew Hui
la source
1
Comprenez-vous la différence entre \ n et <br/> en HTML?
Cole Johnson
2
<br/> fonctionnera du côté du rendu html, tandis que / n affichera uniquement votre code html en nouvelle ligne
rajesh kakawat
Je regardais d'autres sites Web et ils ont des infobulles multilignes sans le br
Matthew Hui

Réponses:

265

Vous pouvez utiliser white-space:pre-wrapdans l'info-bulle. Cela obligera l'info-bulle à respecter les nouvelles lignes. Les lignes seront toujours enveloppées si elles sont plus longues que la largeur maximale par défaut du conteneur.

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

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

Si vous souhaitez empêcher le texte de s'habiller, procédez comme suit.

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

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

Aucun de ceux-ci ne fonctionnera avec un \ndans le html, ils doivent en fait être de véritables nouvelles lignes. Alternativement, vous pouvez utiliser des nouvelles lignes codées &#013;, mais c'est probablement encore moins souhaitable que d'utiliser <br>les.

Chad von Nau
la source
1
Maintenant, comment faire cela avec un popover.
aaa90210
1
@ aaa90210 vous pouvez essayer .popover-content { white-space:pre-wrap; }. En fonction de votre contenu, .popover-content p { white-space:pre-wrap; }ou quelque chose de similaire, cela pourrait mieux sembler.
Chad von Nau
Est-il possible d'afficher les variables JSP dans l'info-bulle comme ceci? J'ai essayé <a href="#" rel="tooltip" title="${aaa} ${bbb} ${ccc}" class="example">Show</a>. Mais cela donne ceci: aaabbbccc (chaînes concaténées).
zygimantus
1
.tooltip-inner {white-space: pre-line;} fonctionne pour moi.
Kishor K
pré-ligne a fonctionné pour moi - tous les autres ont fait que le texte ne s'aligne pas correctement
Adam Moisa
221

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

My <a href="#" title="This is a<br />test...<br />or not" class="my_tooltip">Tooltip</a> test.

$('.my_tooltip').tooltip({html: true})
Costales
la source
1
Vous n'avez pas coché l' Bootstrap 2.0.2 (js only)option dans votre jsFiddle, ce qui l'empêche de fonctionner lors de l'exécution initiale (ouverte). Marquez-le et enregistrez-le, afin que les autres ne se conforment pas, que votre exemple ne fonctionne pas.
trejder
56

Si vous utilisez Twitter Bootstrap Tooltip sur un élément sans lien, vous pouvez spécifier que vous voulez une info-bulle multiligne directement dans le code HTML, sans Javascript, en utilisant uniquement le dataparamètre:

<span rel="tooltip" data-html="true" data-original-title="1<br />2<br />3">5</span>

Ceci est juste une version alternative de la réponse de Costales . Toute la gloire lui revient! :]

trejder
la source
2
Pourquoi dites-vous «élément sans lien»? J'ai essayé cela sur un lien et cela semblait fonctionner correctement.
ec2011
2
Eh bien ... je ne me souviens pas! :] Après cinq mois, je pense que je me suis trompé. Je ne sais pas non plus pourquoi cela ne devrait pas fonctionner sur les liens. Désolé ...
trejder
1
Celui-ci a fonctionné pour moi, spécialement si vous déclenchez des infobulles avec javascript, cela sera chargé dans l'élément lui-même, merci!
Leo
16

Si vous utilisez Angular UI Bootstrap, vous pouvez utiliser l'info-bulle avec la syntaxe html: tooltip-html-unsafe

par exemple, mise à jour vers angular 1.2.10 et angular-ui-bootstrap 0.11: http://jsfiddle.net/aX2vR/1/

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

chakming
la source
0

La solution CSS pour Angular Bootstrap est

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

Pas besoin d'utiliser un élément parent ou un sélecteur de classe si vous n'avez pas besoin de restreindre son utilisation. Copy / Pasta, et cette règle s'appliquera à tous les sous-composants

Antonis
la source