Comment append des sauts de ligne dans une info-bulle dans une conception de matériau angular

Comment append un saut de ligne dans les info-bulles J’ai implémenté l’info-bulle mais je ne suis pas en mesure d’append des sauts de ligne ou des sauts de ligne dans tooltip. Voici mon code

http://codepen.io/apps4any/pen/RWQLyr

Html

List1
List2
List3
List4

CSS:

 .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button, .tooltipdemoBasicUsage md-toolbar .md-toolbar-tools .md-button:hover { box-shadow: none; border: none; transform: none; -webkit-transform: none; } .tooltipdemoBasicUsage .left { top: 70px !important; left: 56px !important; } .tooltipdemoBasicUsage .right { top: 70px !important; right: 56px !important; } 

JS

 angular.module('MyApp') .controller('AppCtrl', function($scope) { $scope.demo = {}; }); 

L’ajout de ce CSS semble fonctionner dans votre cas (avec le
s):

 md-tooltip .md-content { height: auto; } 

Je ne sais pas pourquoi Angular-Material a codé en dur la hauteur à 22px. Vous devrez vérifier si cette modification rompt les autres info-bulles.

Ou vous pouvez l’appliquer spécifiquement à ce cas d’utilisation en lui donnant une classe, par exemple tt-multiline , pour pouvoir la cibler en CSS:

 md-tooltip.tt-multiline .md-content { height: auto; } 

Edit: À partir de Angular-Material 1.1, certains noms de classes ont été modifiés pour commencer par un trait de soulignement.

Dans ce cas, utilisez

 md-tooltip ._md-content { height: auto; } 

et pour une classe spécifique

 md-tooltip.tt-multiline ._md-content { height: auto; } 

Depuis la version de matériau angular> 1.1.2, vous pouvez simplement remplacer la classe .md-tooltip :
( JsFiddle )

 .md-tooltip { height: auto; } 

Et si vous voulez styliser une info-bulle particulière, ajoutez une classe personnalisée à l’élément md-tooltip :
( jsFiddle )

HTML

  I'm a multiline 
tooltip

CSS

 .tooltip-multiline { height: auto; } 

les deux cas testés dans les versions à matériaux angulars 1.1.2, 1.1.3 et 1.1.4

Vous pouvez voir le style de md-tooltip (v0.11.4) ici: https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.4/angular-material.css

Mes propres réécrit le style de conception matérielle pour permettre des infobulles multi-lignes agréables:

 md-tooltip { font-family: Roboto, 'Helvetica Neue', sans-serif; .md-background { border-radius: inherit; } .md-content { height: auto; width: 400px; max-width: 400px; padding: 8px; white-space: initial; } } @media screen and (min-width: 600px) { md-tooltip .md-content { font-size: 14px; height: auto; width: 300px; padding: 8px; max-width: 300px; } } 

C’est ce que j’ai fait. Maintenant, il va faire des sauts de ligne automatiques ou y placer un
. Définissez le max-with ci-dessous à ce dont vous avez besoin.

 md-tooltip .md-content { height: auto !important; max-width: 200px !important; font-size: 13px !important; } md-tooltip { height: auto !important; max-width: 200px !important; font-size: 13px !important; overflow: visible !important; white-space: normal !important; } md-tooltip ._md-content { height: auto !important; max-width: 200px !important; font-size: 13px !important; } 

Ou vous pouvez utiliser white-space: pre-line; dans la classe personnalisée de votre info-bulle md. 🙂