web-dev-qa-db-fra.com

Comment faire pour que les infobulles de bootstrap de Twitter aient plusieurs lignes

J'utilise actuellement la fonction ci-dessous pour créer du texte qui sera affiché à l'aide du plug-in d'aide-mémoire de bootstrap. Pourquoi les info-bulles multilignes ne fonctionnent-elles qu'avec <br> et non pas \n? Je préfère qu'il n'y ait pas de code 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
javascriptcsstwitter-bootstrap
146
Matthew Hui

Vous pouvez utiliser white-space:pre-wrap dans l'info-bulle. Cela fera que l'info-bulle respecte les nouvelles lignes. Les lignes seront toujours bouclé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 d'être renvoyé à la ligne, procédez comme suit.

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

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

Aucune de celles-ci ne fonctionnera avec un \n dans le code HTML, elles doivent en réalité être de nouvelles lignes. Alternativement, vous pouvez utiliser des nouvelles lignes codées &#013;, mais c'est probablement encore moins souhaitable que d'utiliser <br>.

250
Chad von Nau

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})
210
costales

Si vous utilisez Twitter Bootstrap Tooltip sur un élément non lié, vous pouvez spécifier que vous souhaitez une info-bulle multiligne directement en code HTML, sans Javascript, en utilisant simplement le paramètre data:

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

Ceci est juste une version alternative de costales 'answer. Toute la gloire lui revient! :]

51
trejder

Si vous utilisez Angular UI Bootstrap, vous pouvez utiliser les info-bulles avec la syntaxe html: tooltip-html-unsafe

par exemple . mise à jour pour 1.2.2 angulaire & angular-ui-bootstrap 0.11: http://jsfiddle.net/aX2vR/1/

old one: http://jsfiddle.net/8LMwz/1/

16
chakming

Dans Angular UI Bootstrap 0.13.X, tooltip-html-unsafe était obsolète. Vous devriez 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>!');
2
soote

La solution CSS pour Angular Bootstrap est

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

Il n'est pas nécessaire d'utiliser un élément parent ou un sélecteur de classe si vous n'avez pas besoin de restreindre son utilisation. Copie/Pâtes, et cette règle s'appliquera à tous les sous-composants 

0
Antonis