More than 3 years have passed since last update.

mat-tooltip で複数行対応するためにしたこと

Last updated at 2022-01-19Posted at 2021-08-04

上手いことすんなりいかなかった記憶なので
備忘録として後世の自分に残しておく
参考サイト：https://www.angularjswiki.com/material/tooltip/
👆に詳細がかいてあるのでぜひ。

環境

Angular v10

custom-tooltipを追加し改行させるように設定する。

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

matTooltipClass="custom-tooltip"でバインドする。
「」で改行してくれるようになる。

<mat-icon
  matTooltip="AAA&#13;・BBB&#13;・CCC"
  matTooltipClass="custom-tooltip"
>info
</mat-icon>

custom-tooltipにfont-sizeでフォントのサイズも変更できたのでcss周りをいじれるようになった。