Tooltips on overflow menu

[mitchellbernstein]

Summary

The ability to inject a tooltip on an overflow menu item, especially in a disabled state to explain why it's disabled, is not currently possible. We'd like to propose the ability to allow this. Looking for development and design input.

Justification

We need to explain to the user why they have disabled actions and how to enable this action. Otherwise, they're left in the dark not knowing how to move forward in some cases.

Desired UX and success metrics

The user is able to hover over a menu item and depending on what the design calls for, either an immediate reaction or a momentarily delayed reaction, the tooltip would appear on the side of the item.

"Must have" functionality

• Must allow for dynamic use of tooltip (both single line and multiple line)
• Must allow for timing control (immediate on hover for disabled items and a second of hovering before revealing the tooltip– up to the designer).

Specific timeline issues / requests

This would be ideally implemented by Q4 as our delivery to ship is September 25th.

Available extra resources

What resources do you have to assist this effort?

Can contact [email protected] as he's the dev on our team responsible for helping to implement this capability.

Examples of it looking werid and not natural:

Example of it acting as depicted in our designs:

[dakahn]

The first few proposed designs could be very frustrating for people using magnification -- with the end of a potentially a very long run on sentence being quite a ways away from it's triggering element (at 300+ magnification). we should use a non-modal dialog here instead, I'd think (like your last example).

That concern aside, general accessibility guidance with this pattern is:

• make an overflow list item's disabled state a visual affordance only (in other words, don't set disabled on the list item's HTML).
• allow the disabled list item to be focusable by keyboard
• have the dialog trigger on focus and persist until focus is moved
• the dialog should announce itself via an aria-live region

[swwebster]

FWIW, this is a capability that my product would also be interested in having, as our existing (pre-Carbon) code has many instances of tooltips on disabled actions/buttons. Our dev team has created a workaround of some kind using custom Carbon components in the mean time.

Example:

[emyarod]

#7277 provided a workaround with native tooltips but I'm not sure if we will proceed with supporting Carbon tooltips within overflow menus at the moment based on @dakahn's feedback above

[tw15egan]

We are unlikely to add Tooltips to disabled items, as disabled items are inherently inaccessible to keyboard / screenreader users. @dakahn offered some workarounds, like setting a visual affordance of being disabled (but not actually passing down the disabled prop). Hope that helps!