Material-design-lite: Tooltips don't work on disabled buttons

[rauhs]

Hi and thanks for mdl!

If I add disabled to a <button> and for this button a tooltip. The tooltip stops working. Removing the disabled and it's working as it should.

Bug?

[Garbee]

Makes logical sense. If something is disabled it therefore shouldn't trigger any UX other than disabled indicators.

This isn't exactly straightforward though, seems like a UX quirk that can go either way depending on what is being done.

[rauhs]

Yeah it does make sense. I can work around it by using a div or something else. I just want to let the user know why the button got disabled.

But if this is not a mdl bug then feel free to close it. No reason to put extra code into mdl.

[Garbee]

I think some context here may help. Could you provide a quick codepen with a minimized UX you are dealing with?

Say in the case of standard forms, normal input validation should provide that feedback. But, your UX may have something special in it where that isn't viable. In which case we may want to look at handling this internally somehow.

[rauhs]

It might be better if I describe the use-case, since I'm not sure how a minimal example could look.

1. A user selects a _category_
2. He can reset his category selection by a click on a cross ("the button").
3. He can then enter (multiple) objects that belong to this category.
4. I don't want to allow a reset after a user entered data since it means discarding his entered data. So I disable the reset button unless all user input is empty.
5. I don't want to just make the reset "the button" disappear but let the user know why it's disabled.

[Garbee]

IMO that situation is best handled by better UX internally. For example a custom "reset categories" button that resets only the categories and not the entire form. This way the disabled state is actually necessary for the entire form since you are trying to prevent data loss, but the categories on their own have their own reset functionality.

[rauhs]

Maybe I wasnt clear: That's what I currently have. Though the inputs depend on the selected category. The existing inputs make no sense anymore should the category change. I'll provide a "reset objects" button that requires a two-click (with confirmation) button to actually throw them away below the form. But I don't want users to think they can change the category after they've input some (can be hundreds) object definitions.

[Garbee]

We'll try to make sure this works when building V2 components. If someone wants to look into doing this for 1.x then they are free to do so on their own.

[rauhs]

Another potential bug to lookout for: I have button that deletes an object, and has a tooltip. It's disabled if the object is deleted (on the server). Having React switch the button to disabled causes the tooltip to stay up forever and never disappear.

[thomasgodart]

Another use-case:

• a save button icon with a tooltip for the word "save"
• a xhr request that disables the button during the request to avoid a double-save

Another use-case:

• an edit button icon with a tooltip for the word "edit"
• a click on the button that disables it while entering into the edit mode

So in those cases, the tooltip always appears because you have to click the button, and never dissapears after the button being disabled