web-dev-qa-db-fra.com

matTooltip multiligne angulaire à 2 matériaux

Je suis nouveau sur Angular 2 Material. Quel est le moyen privilégié de créer une info-bulle multiligne?

Par exemple, l’info-bulle suivante pourrait être utilisée:

AA BBBBBBBBBB CCCC DDDDD

Et, je souhaiterais peut-être qu'il s'affiche dans un format multiligne comme ceci:

AA BBBBBBBBBB 
CCCC 
DDDDD
angularangular-material
8
Jonas

Commencez par créer une classe pour votre info-bulle, afin de la séparer des lignes.

.my-tooltip {
    white-space: pre-line;
}

Ajoutez ensuite la classe à votre info-bulle et la ligne se termine par son code 

<span 
    matTooltip="First line&#13;Second line"
    [matTooltipClass]="'my-tooltip'">
</span>
17
Rodris

vous pouvez réaliser la même chose sans même avoir besoin de\n ou 
écrivez simplement votre contenu tel quel, par exemple:

"abc abc abc" si vous avez besoin de plusieurs lignes

Tout ce que vous devez faire c'est

    ::ng-deep .mat-tooltip  {
    white-space: pre-line    !important;
}

ajoutez ce qui précède à votre css

4
Atharva Pandey

Vous pouvez définir le style d'infobulle à l'aide de ng-deep:

::ng-deep .mat-tooltip  {
    max-width: 60px !important; // for example
}

DEMO

0
Vega