Be able to have tooltips on disabled items

[danielmutis]

Component/pattern to amend

Disabled components being able to have tooltips

Visual

Context

We are currently unable to have tooltips on disabled items. These are often useful in explaining what the reason behind the item being disabled is. This mostly happens in apps when we decide to disable actions on a page for a particular reason, and the tooltip would help the user figure out what to do to enable it.

[bartaz]

We used to have this discussion before #2180 and it was not implemented because it was considered bad pattern (user needs to know to hover on something to check the tooltip), but more importantly browsers don't allow this. When element is disabled it doesn't trigger any events, including mouse events needed to know when to show/hide the tooltip.

So to implement this, we would need a fake disabled style, that would just look disabled, but not disable the input (from browser point of view). This will be fighting with a native browser behaviour.

Another approach would be to have some kind of wrapper around disabled element, so the tooltip will not be on the disabled element, but on parent. This may work, but will require additional markup (wrapping element) which may not be straighforward in context of some components.

[danielmutis]

WG: from a UX perspective we believe this is useful, in order to give users contextual info on why the item is disabled. These don't work on mobile, but in our context this is not very prominent.

Sources:
https://www.smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons/#making-disabled-buttons-more-inclusive
https://www.smashingmagazine.com/2021/08/frustrating-design-patterns-disabled-buttons/

The implementation of this needs to be investigated further.

[bartaz]

Having a quick look with Max it seems that the browsers these days seems to be a bit more consistent about triggering mouse events on disabled elements, so it should make it more feasable for implementation. I still need to investigate it a bit further and prototype some Vanilla examples.

https://codepen.io/maximilian-blazek/pen/KKEgPqG