Угловой материал - как добавить всплывающую подсказку к отключенной кнопке

Я заметил, что директива 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>

Ответ 1

Это не работает, потому что оно вызывается событием mouseenter, которое не запускается большинством браузеров для отключенных элементов. Обходной путь - добавить matTooltip к родительскому элементу:

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

В приведенном выше примере предполагается, что существует метод определения, должна ли кнопка быть включена или нет. При использовании matTooltipDisabled всплывающая подсказка будет отображаться, только если кнопка отключена.

Рекомендации:

Ответ 2

У меня была похожая проблема при отображении всплывающей подсказки на отключенной кнопке со значком. Данное решение не было практичным для меня, потому что добавление дополнительного div в верхней части кнопки, испортило расположение кнопки относительно других кнопок на панели инструментов.

Более простым решением для меня было добавить подсказку внутри иконки внутри кнопки. Примерно так:

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

Поскольку значок не отключен, он работает.

Ответ 3

Да, самое простое решение, как выше. Но для моего случая мне нужно было больше гибкости.

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