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

— Matthew Hui
source

1

Comprenez-vous la différence entre \ n et en HTML?

— Cole Johnson

2

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

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 , mais c'est probablement encore moins souhaitable que d'utiliser  les.

— Chad von Nau
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 test... or not" class="my_tooltip">Tooltip</a> test.

$('.my_tooltip').tooltip({html: true})

— Costales
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
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
source

2

Dans Angular UI Bootstrap 0.13.X, tooltip-html-unsafe est obsolète. Vous devez maintenant utiliser tooltip-html et $ sce.trustAsHtml () pour réaliser une info-bulle avec html.

https://github.com/angular-ui/bootstrap/commit/e31fcf0fcb06580064d1e6375dbedb69f1c95f25

<a href="#" tooltip-html="htmlTooltip">Check me out!</a>

$scope.htmlTooltip = $sce.trustAsHtml('I\'ve been made <b>bold</b>!');

— suie
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
source