Material: <md-tooltip> does not work inside disabled <md-button>

Created on 23 May 2016 · 13Comments · Source: angular/material

Actual behavior:

What is the issue? md-tooltip is not working inside a disabled md-button
What is the expected behavior? md-tooltip should work working inside disabled md-button

CodePen or Steps to reproduce the issue:

CodePen Demo which shows your issue : http://codepen.io/cmacdonnacha/pen/YqmrNq
Details: Hover over the disabled button, tooltip is not displayed.

Angular Versions:

Angular Version: 1.4
Angular Material Version: 1.0.8

Additional Information:

Browser Type: Chrome
Browser Version: 50.0.2661.94 m
OS: Windows 7 SP1
Stack Traces:

works as expected

Source

cmacdonnacha

👍1

Most helpful comment

Why is not supported? A user might not be aware of why a button is disabled.

lumalav on 9 May 2017

👍6

All 13 comments

Not supported.

ThomasBurleson on 24 May 2016

Why is not supported? A user might not be aware of why a button is disabled.

lumalav on 9 May 2017

👍6

We'd also like to explain to our users why a button is disabled.

maelfrize on 15 May 2017

👍4

@ThomasBurleson Will this be supported in material2?

cmacdonnacha on 15 May 2017

Would love to see this feature!

yogimittal on 15 May 2017

👍2

We're having the same issue here - the only solution is to add external css to make this work or use a new library for tooltips

Pranay92 on 16 May 2017

This issue states that this is a browser-related problem. A browser does not fire mouse events for disabled buttons #2576

mark-langer on 23 Jun 2017

Seems like a quick workaround is to take the <md-tooltip> out of the <md-button> and put them both in a container <div>

<div>
    <md-button ng-disabled="true">
        <md-icon>view_list</md-icon>   
    </md-button>
    <md-tooltip>This is disabled because ...</md-tooltip>
</div>

florin05 on 25 Sep 2017

👍1

florin05,
solution with div has no effect....

dtrenin7 on 26 Sep 2017

👎1

@Pranay92 - Can you share CSS that did the trick to show tooltip on disabled ?

zendu on 22 Dec 2017

The code I posted still works for me, here is a screenshot.
To be precise, the button contains an icon, if it is empty there is nothing to hover over, so I am updating my code sample
tooltip disabled2

florin05 on 22 Dec 2017

👍1

lfreneda on 31 May 2018

@lfreneda As @florin05 posted, you can wrap the button in a div or span and then add the tooltip to that. This is a browser restriction and is not an AngularJS Material issue.