Using Tooltips on disabled Buttons

[jaakerisalu]

Hello!

Admiral has a design pattern where a disabled button has a tooltip to tell the user why.

The above example is created, using Paste, like this:

Because a disabled button triggers no events.

Could an exception be made to allow Tooltips to function on disabled Buttons? Having a variant='disabled' to just apply the disabled styles without the logic would work.

This is especially relevant because the docs recommend having a working button that returns an error after clicking, which is unreasonable for this use-case.

[TheSisb]

Hi @jaakerisalu,

For some background on why this doesn't work and possible workarounds, please see Simon's reponse to this discussion thread.

[nkrantz]

Hey @jaakerisalu! Good question. As of right now, we’re not ready to provide the variant='disabled' option to Button. While it is possible from an engineering standpoint, the web accessibility community is hesitant (see links below). Because it’s not expected behavior for a disabled element to provide any type of interactivity, we’re erring on the side of caution and sticking with the HTML spec for the time being. However, it’s possible that this may change in the future depending on need.

Take a look at the response linked above by Shadi where you'll find some alternative solutions. We also have a short video outlining guidance on our Tooltip/Popover components that we’ll share once it’s ready (probably later today).

• WC3 Focusability of Disabled Controls
• Using tooltips on disabled buttons outside of the tab sequence
• Disabled native HTML elements and focusability