ディレクティブ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
を使用すると、ボタンが無効な場合にのみツールチップが表示されます。
参照:
無効なアイコンボタンにツールチップを表示しているときに、同様の問題が発生しました。ボタンの上に追加のdivを追加すると、ツールバーの他のボタンと比較してボタンのレイアウトがめちゃくちゃになったため、与えられた解決策は私にとって実用的ではありませんでした。
私にとってより簡単な解決策は、ボタン内のアイコン内にツールチップを追加することでした。このようなもの:
<button mat-raised-button [disabled]="true">
<mat-icon matTooltip="You cannot delete that">delete</mat-icon>
</button>
アイコンが無効になっていないため、機能します。
はい、最も簡単な解決策は 上記 のようなものです。しかし、私の場合はもっと柔軟性が必要でした。
<button [disabled]="form.invalid">
<span [matTooltip]="form.invalid ? 'some text' : ''">button text</span>
</button>
解決策を見つけました!
次のようにツールチップをボタンのコンテンツに挿入します。
<button type="submit" [disabled]="disableEdit()" class="btn btn-primary btn-sm"
[routerLink]="['/entity', entity.id, 'edit']">
<div matTooltip="{{ 'entity.placeholders.cantEdit' | translate }}"
[matTooltipDisabled]="disableEdit()">
<fa-icon [icon]="'pencil-alt'"></fa-icon>
<span class="d-none d-md-inline">{{ 'entity.action.edit' | translate }}</span>
</div>
</button>
必要な場合に表示されるタイトル属性を使用できます
<button mat-raised-button [disabled]="true" title = "Some text">
<mat-icon>delete</mat-icon>
</button>
あなたは三項演算子でプロパティバインディングを行うことができます