Angular Material × Tooltip × 見た目を変更する方法の違い（v8.2.3 vs v11.2.6）

目的

Angular MaterialのTooltipの見た目を変更する方法の違いについてまとめる。
対象のバージョンは、8.2.3と、11.2.6とする。

Version 8.2.3

Customize Angular Material 2 Tooltip styles を参考に・・・

CSSに、::ng-deepと、任意のクラス名の設定を追加する。

 ::ng-deep .test {
  background-color: brown;
}

htmlファイルで、Tooltipを実装する。その際、matTooltipClass属性を付与し、そこに上記で定義したクラスを指定する。

<button mat-raised-button
        matTooltip="Info about the action"
        aria-label="Button that displays a tooltip when focused or hovered over"
        matTooltipClass="test">
  Action
</button>

これでTooltipの見た目を変更できる。

Version 11.2.6

[Set font size of Angular Material Tooltip

](https://stackoverflow.com/questions/44587532/set-font-size-of-angular-material-tooltip)を参考に・・・

CSSに以下の定義を追加する...だけでOK。

 .mat-tooltip {
   background-color: black;
}

これでTooltipの見た目を変更できる。

API reference for Angular Material tooltipを参考に・・・

Propertiesをよく見たら、@Input('matTooltipClass')　tooltipClass: anyが定義されていた。
ということは・・・ CSSで以下のように定義したものが、

 .test {
  background-color: red;
}

//  .mat-tooltip {
//    background-color: black;
// }

以下のようにして呼び出すことができる。こっちが正統派っぽい。

<button mat-raised-button
        matTooltip="Info about the action"
        aria-label="Button that displays a tooltip when focused or hovered over"
        matTooltipClass="test">
  Action
</button>

ちなみに、.met-tootipのコメントアウトを解除すると、そちらのスタイルが優先して適用される。両方コメントアウトせずに使い、かつ、testクラスを有効にしたい場合は、testのほうの設定に!importantを付与して強制すれば実現できる。

まとめ

バージョン違いでTooltip（に限らないかもしれないが）のスタイルの適用方法が異なる。Tooltip CSSとかで検索して出てきたものに飛びつくと、うまくいかず混乱するため、注意が必要。