Tooltip

[joshblack]

About

Detailed Design

API Design

Examples

Name	Type	Description

Accessibility

• http://scottaohara.github.io/a11y_tooltips/
• https://adrianroselli.com/2021/07/stop-using-pop-up.html

Links & Resources

• https://reach.tech/tooltip

• https://www.radix-ui.com/docs/primitives/components/tooltip

• https://chakra-ui.com/docs/overlay/tooltip

• Ship initial version of tooltip based on design guidance #9966

[joshblack]

This issue is for preparing Tooltip for v11 Beta 2. For this release, we will need to do the following:

• Implement the significant changes for tooltip, including:
  • Tooltip is now a generic component that can be applied to interactive elements
  • ToggleTip is now a generic component that implements the disclosure pattern
  • Definition Tooltip now uses ToggleTip
  • Icon Tooltip is now IconButton
• Tests
• Documentation
  • Storybook
  • Website

[kingtraceyj]

hey @joshblack! let's test these specs out and see if we feel like the timing is right. if not, we can delay them a little more but let's see how these look. i want to keep the snappy but make sure the user is intentionally hovering.

Timing specs

Hover enter:
.3 second delay

Hover exit:
.5 second delay

Focus:
Immediately show tooltip on focus and immediately hide on focus exit

Behaviors

In a group of tooltips, if one tooltip is already active, then the others show immediately when a user hovers over them.
(use case example: icon buttons are right next to each other and the user is hovering over to see functions one after another)

[tay1orjones]

Regarding timing, from the spec:

authors SHOULD display the tooltip after a short delay ... Typical tooltip delays last from one to five seconds.