web-dev-qa-db-ja.com

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>
angularangular-material2
35
Marcin Kunert

これは、無効化された要素に対してほとんどのブラウザーで発生しないmouseenterイベントによってトリガーされるため、機能しません。回避策は、matTooltipを親要素に追加することです。

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

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

参照：

60
Marcin Kunert

無効なアイコンボタンにツールチップを表示しているときに、同様の問題が発生しました。ボタンの上に追加のdivを追加すると、ツールバーの他のボタンと比較してボタンのレイアウトがめちゃくちゃになったため、与えられた解決策は私にとって実用的ではありませんでした。

私にとってより簡単な解決策は、ボタン内のアイコン内にツールチップを追加することでした。このようなもの：

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

アイコンが無効になっていないため、機能します。

8
Sumit

はい、最も簡単な解決策は 上記 のようなものです。しかし、私の場合はもっと柔軟性が必要でした。

   <button  [disabled]="form.invalid">
      <span [matTooltip]="form.invalid ? 'some text' : ''">button text</span>
    </button>
7
Fes9L

解決策を見つけました！

次のようにツールチップをボタンのコンテンツに挿入します。

<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>
0
Juan Lamberti

必要な場合に表示されるタイトル属性を使用できます

<button mat-raised-button [disabled]="true" title = "Some text">
  <mat-icon>delete</mat-icon>
</button>

あなたは三項演算子でプロパティバインディングを行うことができます

0
Narayanan 679