Skip to content

Frequently Asked Questions (FAQs)

Kyle Taborski edited this page Oct 12, 2022 · 22 revisions

Why can't I put a Tooltip around any element?

Tooltips need to be accessible to keyboard and screen reader users, so we want to ensure that they are only placed on focusable and hoverable elements. For example, plain text on a page isn't focusable, so keyboard and screen reader users would be unable to access the information in that tooltip.

If you need to display some additional context, consider using ContextualHelp.

Can I put a Tooltip on a Textfield?

Short answer, no. You can conclude this from the spectrum docs https://spectrum.adobe.com/page/tooltip/ even if it doesn’t state it explicitly, every TextField has a ContextualHelp. In addition, it says “Use tooltips to describe icons” of which a TextField will never be an icon, it's a TextField. It also says “Don’t use tooltips to communicate crucial information”. Putting a TextField's label in a Tooltip would count as crucial information.

Consider adding a description if you need to provide additional information about the field.

Why don't my tooltips appear on Mobile?

Tooltips are displayed on hover and on keyboard focus. These do not exist in touch interactions common to mobile devices. Tooltips should not be used for critical information; instead, consider using ContextualHelp.

Why shouldn't I have a Popover open on hover over a button?

Hoverable actions are not accessible and would exclude keyboard-only, screen reader, and mobile users, as they would not be able to open this Popover. This is why Tooltips display on both hover and focus and aren't available on mobile devices. For Popovers/Dialogs the primary action of the button (trigger) is to display them. If the desired functionality is critical information via a Popover as a giant Tooltip, consider using ContextualHelp.

Why don't Buttons use a pointer cursor?

This matches Spectrum's cursor guidelines, which specify that most clickable elements (with the exception of links), should use an arrow cursor for all states, including hover and down.

The intent is to better match native browser <button> behavior, the CSS spec, Microsoft interface guidelines and Apple interface guidelines.