search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.52k stars 1.31k forks source link

[Tooltip] Tooltip on disabled buttons #10612

Closed tanzorz closed 3 months ago

tanzorz commented 1 year ago

Summary 💡

When a button is disabled I should have to option to still be able to see the tooltip on hover.

Examples 🌈

image I want it to look like this - the button is disabled but there is still information as to what it is usually for.

Motivation 🔦

In some views on our website we want to disable some buttons. When a user hovers over the disabled button, we want to provide a tooltip to briefly explain that this action is not available in that view. This is so a user understands why some actions are disabled.

There are workarounds for this issue already https://github.com/mui/mui-x/issues/2871#issuecomment-1336378966 However one workaround requires raw html ( using span tags ) which alters formatting and spacing in some cases and the other requires creating some custom components. Given this workaround is something that many people seem to require, it'd be a nice feature to add to the MUI library as a standard.

Search keywords: tooltip disabled button Order ID: 73771

romgrk commented 1 year ago

Is your issue related to a MUI X component or to the MUI Core components library? If it's related to a MUI X component, can you specify which?

oliviertassinari commented 3 months ago

It feels like it's about https://mui.com/material-ui/react-tooltip/#disabled-elements.

github-actions[bot] commented 3 months ago

:warning: This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@tanzorz: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

JonathanMiner1 commented 3 months ago

I think showing a tooltip explaining why something is disabled seems like a common use case, probably more common than someone wanting to hide a tooltip whenever they disable the tool.

And if tooltips did show on disabled items, it would be very easy to make a workaround to hide the tooltip, so people could have it both ways. But when tooltips don't show on disabled items, it seems hard to make a sideeffectless workaround.

Wrapping in a span as suggested in the documentation affects the alignment or layout. Changing style.pointerEvents to "auto" requires you to redisable the color change on hover, and different buttons like contained buttons need a different disabled background color, and you may want to show tooltips on disabled dropdowns or other components as well. Maybe a generic solution to the color change could be like setting the transition to have infinite duration, and maybe this could allow you to write just one custom file for all types of components that need disable+tooltip, but I haven't figured out transitions yet, idk if that idea would work.