Angular Material: Display a tooltip on a disabled button

Updated: 2023-07-12

Sometimes in an Angular application I need to explain to the user why a button is disabled, some logic in the data doesn't allow to save or delete data and the button is simply disabled.
Or maybe the detail button cannot be clicked if there is no detail available.

A logical solution for me is to add Angular Material Tooltip to explain to the user why the disabled button has this state and give some tips to create the conditions enabling it.

Unfortunately, this doesn't work with all the browsers.

I don't have issues with Firefox, the tooltip is shown on disabled buttons. But, Chromium based browsers (Chrome, Edge, Brave) and Safari disable some mouse event on the disabled button and they don't trigger the tooltip.

According to MDN:

Often browsers grey out such controls and it won't receive any browsing events, like mouse clicks or focus-related ones.

Angular developers won't look for a solution of this problem, as mentioned in the Closed issue Tooltip does not display when host element disabled #5040.

One quick solution is to add a parent element to a Button, the tooltip will be added to the parent, e.g.:

<span [matTooltip]="'Check and import the dates of the last month'"> 
  <button [disabled]="true" mat-raised-button (click)="onImportMissingDates()">Import missing dates</button> 

This code will 'correctly' show the tooltip on the disabled button.

tooltip correctly shown on Safari

the solution has been approved by the Angular team:

github accepted solution

As alternative, you can migrate your clients to Firefox ;-)

You could be interested in

Right click context menu with Angular

Right click custom menu inside dynamic lists with Angular Material

Enums in Angular templates

How to use enum in the html template
Fullstack Angular / Java application quick start guide.
WebApp built by Marco using SpringBoot 3.2.4 and Java 21. Hosted in Switzerland (GE8).