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
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 Second line"
[matTooltipClass]="'my-tooltip'">
</span>
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
Vous pouvez définir le style d'infobulle à l'aide de ng-deep:
::ng-deep .mat-tooltip {
max-width: 60px !important; // for example
}