Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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> 
like image 240
Marcin Kunert Avatar asked Jan 16 '18 09:01

Marcin Kunert


2 Answers

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
like image 161
Marcin Kunert Avatar answered Sep 27 '22 17:09

Marcin Kunert


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.

like image 43
Sumit Avatar answered Sep 27 '22 18:09

Sumit