Tooltip in a disabled visual picker

[dpazc]

Hi team! I’d love your input on this: For a visual picker where only one option is enabled, we’re currently leveraging an informative tooltip on the disabled option to explain why it’s unavailable (screenshot attached). Do you see this as a recommended pattern within our system, or would you suggest an alternative (such as an always-visible inline message or callout above the picker)? Are there accessibility or consistency best practices at play here that we should keep in mind?

Tooltip on Disabled Option
Pros:

• Minimal visual clutter, keeps UI clean
• Delivers contextual explanation at the point of user curiosity
• Familiar pattern in many design systems

Cons:

• Discovery issues for touch users or those who don’t think to hover
• Disabled controls can be less accessible for keyboard/screen reader users
• Not all users expect tooltips on disabled items

Inline Callout/Visible Message
Pros:

• Highly visible, reduces risk of confusion for all users
• Accessible to everyone (including touch and screen reader users)
• No ambiguity about why option is disabled

Cons:

• Uses more screen space; can introduce visual clutter
• May disrupt flow if only a brief explanation is needed

Thanks so much for weighing in.

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

An error occurred with your deployment

FUNCTION_INVOCATION_TIMEOUT

iad1::sqzvs-1752005536482-f95f32d2abaf

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Recommendations on disabled items within a dropdown - Answer (updated: 12/11/2023, similarity score: 89%)
• Guidance on using the disabled state for buttons (updated: 06/14/2022, similarity score: 88%)
• Guidance on using the disabled state for buttons - Answer (updated: 06/14/2022, similarity score: 88%)

[dosubot[bot]]

Tooltips on disabled options are not a recommended pattern in Paste, mainly due to accessibility issues: disabled elements can't receive focus or be tabbed to, so tooltips attached to them are not reliably accessible for keyboard or screen reader users, and they're also undiscoverable for touch users. Paste maintainers and documentation suggest that if you need to explain why an option is unavailable, it's best to use always-visible inline help text or a callout near the disabled option. This approach ensures everyone—including screen reader and mobile users—gets the information without extra effort or risk of missing it. Tooltips are only considered accessible if the element can receive focus (i.e., is not truly disabled), and even then, they may not be obvious to all users, so they're best reserved for supplemental info, not critical explanations about disabled states. For short-term disabled states, keeping the option enabled and showing an error on click is also an accessible alternative. See more in these discussions: discussion 1, discussion 2.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}   

[serifluous]

Hey @dpazc ! Dosu is pretty much correct here. The simplest, accessible way to do this is put the text that's currently in your Tooltip in the option Help Text.

Alternatively, you could remove the option from the list of Visual Pickers and show text or Callout somewhere else on the page explaining why there is no "Generative" option.