Angular Material – How to add a tooltip to a disabled button

This doesn’t work because it is triggered by mouseenter event which doesn’t get fired by most browsers for disabled elements. A workaround is to add matTooltip to a parent element:

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

The example above assumes that there is a method for determining if the button should be enabled or not. By using matTooltipDisabled the tooltip will be shown only if the button is disabled.

References:

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