Be able to have tooltips on disabled items about vanilla-framework HOT 3 OPEN

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.

from vanilla-framework.

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.

from vanilla-framework.

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

from vanilla-framework.