[解決済み] Angular Material - 無効化されたボタンにツールチップを追加する方法

質問

私は、ディレクティブ matTooltip は無効化されたボタンでは動作しないことに気づきました。どうすれば実現できるのでしょうか？

例を挙げます。

<button mat-raised-button [disabled]="true" matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

有効なボタンについては、完全に動作します。

<button mat-raised-button [disabled]="false" matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

どのように解決するのですか？

によって引き起こされるため、これはうまくいきません。 mouseenter イベントによって引き起こされるため、これは動作しません。回避策としては matTooltip を親要素に追加することです。

<div matTooltip="You cannot delete that" [matTooltipDisabled]="!isButtonDisabled()">
    <button mat-raised-button [disabled]="isButtonDisabled()">
        <mat-icon>delete</mat-icon>
    </button>
</div>

上記の例では、ボタンを有効にするかどうかを判断する方法があることを前提にしています。この例では matTooltipDisabled を使うことで、ボタンが無効な場合にのみツールチップが表示されます。

参考文献

• https://github.com/angular/material2/issues/5040
• https://github.com/angular/material2/issues/7953