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>

Solution 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

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

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

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

Solution 5

Try this:

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

View more solutions

Comments

[kvetis]

Note that your text goes against Material Design guide. The tooltip should only describe button. The information that someone cannot delete something should be displayed elsewhere. Source:material.io/guidelines/components/tooltips.html#

[Marcin Kunert]

Thanks for the tip. I wonder how to make it better. If I would call it like: "This button is disabled because you are not allowed to delete that" would it be acceptable?

[kvetis]

In my opinion it should be clear from the context of the button already. When a button is disabled and has a trash icon, that already explains that user cannot delete that without using words. If you want to explain why I think you should use a different approach than tooltip. I'm not expert and maybe you'd do better asking on ux.stackexchange.com. I did a quick search there: ux.stackexchange.com/search?q=tooltip+on+disabled+button that might be of interest of both of us.

[Stephen Turner]

I've found it useful to preempt validation. Better a button that is disabled with a tooltip showing "You must select an event first." than one that must be clicked to display the error, or is disabled and gives no information.

[goneos]

I may be missing something, but doesn't this show whether the button is disabled or not? It seems to display well, but I just want it to show when the button is disabled.

[goneos]

For anyone who is looking for a solution that will ONLY show when the button is disabled, refer to stackoverflow.com/questions/29201953/…

[Marcin Kunert]

@goneos I've updated the answer to answer your question

[goneos]

Thanks @MarcvinKunert. I did it a little differently matTooltip="isButtonDisabled() ? 'You cannot delete that' : ''"

[laike9m]

Works for me :):)

[Saksham]

Tooltip will show only on hovering the icon and not the whole button

[Sean Duggan]

I'm actually getting a message saying that div doesn't take a matTooltipDisabled attribute. Can I confirm that you don't get that?

[Marcin Kunert]

@SeanDuggan I confirm, that it works for me. What tool is giving you this message?

[Sean Duggan]

@MarcinKunert: facepalm It was a combination of me having forgotten to import the right module, and then misspelling "matTooltip". Thank you.

[Peter]

You could add style="display:inline" to the div if you don't want to box the button.

[MatterOfFact]

Is it possible to show the title immediately on hover without delay?

[Admin]

Welcome to Stack Overflow! While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.

[Jonathan]

Also, what if there is not an icon?

[Karan Patokar]

Adding this changes the CSS of the tooltip. Hovering on button shows the tooltip on the left side. Checkout here ibb.co/6DPXgGK

[Michael Norgren]

This worked great for me. Much easier than adding additional div wrappers or switch statements. Thanks for this!