110

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>
4
  • 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#
    – kvetis
    Jan 16, 2018 at 9:40
  • 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? Jan 16, 2018 at 9:47
  • 2
    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.
    – kvetis
    Jan 16, 2018 at 10:03
  • 4
    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. Jun 22, 2018 at 8:48

12 Answers 12

189

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:

9
  • 1
    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
    Dec 4, 2018 at 21:03
  • For anyone who is looking for a solution that will ONLY show when the button is disabled, refer to stackoverflow.com/questions/29201953/…
    – goneos
    Dec 4, 2018 at 21:27
  • 1
    @goneos I've updated the answer to answer your question Dec 5, 2018 at 11:20
  • 1
    Thanks @MarcvinKunert. I did it a little differently matTooltip="isButtonDisabled() ? 'You cannot delete that' : ''"
    – goneos
    Dec 5, 2018 at 19:40
  • 2
    I'm actually getting a message saying that div doesn't take a matTooltipDisabled attribute. Can I confirm that you don't get that? Feb 5, 2020 at 18:29
32

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.

4
  • 13
    Tooltip will show only on hovering the icon and not the whole button
    – Saksham
    Sep 30, 2019 at 11:12
  • 1
    Also, what if there is not an icon?
    – Jonathan
    Nov 5, 2020 at 1:55
  • use a span instead of a div
    – andreisrob
    Feb 6 at 21:20
  • This is not working on angular material 15
    – HDJEMAI
    Jul 31 at 11:43
21

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>
2
  • Works for me :):)
    – laike9m
    Sep 11, 2019 at 0:25
  • the clean solution works fine.
    – Khalil
    Aug 4, 2022 at 13:16
10

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

Try this:

<div [matTooltip]="isDisabled ? 'You cannot delete that' : ''">
    <button mat-raised-button [disabled]="isDisabled">
      <mat-icon>delete</mat-icon>
    </button>
    <div>
1
  • 3
    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.
    – user12867493
    Jul 7, 2020 at 15:39
1

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

1
  • Is it possible to show the title immediately on hover without delay? Jun 6, 2020 at 19:32
1

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

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

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>
2
  • 2
    This worked great for me. Much easier than adding additional div wrappers or switch statements. Thanks for this! Jan 11, 2022 at 15:38
  • Sadly "pointer-events: all" seems to be a feature only targeting SVG elements. It would be so great if it actually worked on normal DOM elements. Jul 17, 2022 at 23:29
0

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.

0

You can also add the CSS class :

pointer-events: auto;

On your disabled element which will enable the pointer events and show the tooltip

-1

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>
1
  • You need to add the title on the button, not on the div element. title works in case of disabled
    – Prasanna
    Feb 1 at 22:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.