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

Question

I've noticed that the directive matTooltip doesn't work on a disabled button. How can I achieve it?

Example:

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

For an enabled button it works perfectly:

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

Answer 1

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

Answer 2

I had a similar issue while displaying tooltip on a disabled icon button. The given solution was not practical for me, because adding an additional div on top of the button, messed up the layout of the button relative to the other buttons in the tool bar.

A simpler solution for me was to add the tooltip inside the icon inside the button. Something like this:

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

Since the icon is not disabled, it works.

Answer 3

Yes, the simplest solution is like above. But for my case I needed more flexibility.

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

Answer 4

Adding tooltip inside mat-icon in a button as suggested by others will only work when you hover the icon not the button. Instead of that you can just wrap your button around another div without any css classes, just tooltip.

Additionally you can also add matTooltipDisabled property to make sure your tooltip is never disabled.

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

Answer 5

Try this:

<div [matTooltip]="isDisabled ? 'You cannot delete that' : ''">
    <button mat-raised-button [disabled]="isDisabled">
      <mat-icon>delete</mat-icon>
    </button>
    <div>

Answer 6

You can use title attribute it will display in necessary cases

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

you can do property binding with ternary operators

Answer 7

I find a solution!

Put the tooltip into the button content like this:

<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>

Answer 8

I know this is ugly but you also do this way, Use multiple buttons with ngIf

<!-- No click action -->
<button *ngIf="disable" mat-raised-button matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

<button *ngIf="!disable" mat-raised-button (click)="delete()">
  <mat-icon>delete</mat-icon>
</button>

Answer 9

Just add style 'pointer-events: all' to your button like this

<button mat-raised-button style="pointer-events: all" [disabled]="true" matTooltip="You cannot delete that">
  <mat-icon>delete</mat-icon>
</button>

Answer 10

Angular and Angular Material 15

You can add the matTooltip to the child element, most logically in case of a material button the span holding the button text or the mat-icon with the material icon.

When using Material buttons the disabled button has by default the style pointer-events: none applied; see global material style for the buttons:

Icon buttons:

.mdc-icon-button:disabled,
.mat-mdc-icon-button[disabled] {
  pointer-events: none;
}

Normal buttons:

.mdc-button[disabled],
.mat-mdc-button[disabled] {
  pointer-events: none;
}

You will need to cancel this out for the child elements if you want the tooltip to show on hovering the button. This can be easily solved like this:

<button #myIconButton mat-icon-button [disabled]="!isAllowedDelete">
  <mat-icon [style.pointer-events]="'all'"
            matTooltip="You are not allowed to delete this item"
            [matTooltipDisabled]="!myIconButton.disabled">delete</mat-icon>
</button>

<button #myButton mat-button [disabled]="!isAllowedDelete">
  <span [style.pointer-events]="'all'"
        matTooltip="You are not allowed to delete this item"
        [matTooltipDisabled]="!myButton.disabled">delete</span>
</button>

Or alternatively if you want it in your stylesheet:

button[disabled] span.mat-mdc-tooltip-trigger
button[disabled] mat-icon.mat-mdc-tooltip-trigger {
  /* Allows for tooltips to be triggered on disabled buttons */
  pointer-events: all;
}

In my opinion this is better then wrapping the button in an element, you can now disable/enable the tooltip directly using the button "disabled" state (myButton.disabled) and you don't need to add any additional wrappers or elements to the DOM.

Checkout a working example in this Stackblitz.

Answer 11

Not only matTooltip, even title attribute doesn't work on disabled button.

Just add the tooltip on its containing div, not on the button itself.

<div title="Some tooltip message">
  <button type="button" [disabled]="!enable()">My Button</button> 
</div>