Tooltip, ToggleTip, Popover, Disclosure

[joshblack]

About

Usage

We're looking to update our tooltip component to no longer support interactive descendants. This functionality is moving into a separate component. Components like TooltipDefinition and TooltipIcon are being updated to use the new Popover component.

Components

Popover

This component is used to render content above the current content on the page. In other words, this content renders on top of whatever is below the triggering element in the z-axis.

Tooltip

This component is used to add a tooltip to an interactive component.

IconButton

This component replaces the TooltipIcon component. In general, icons are unable to receive focus and therefore are not suitable for a tooltip. In most cases, a button is intended to be used as the icon performs some action. In these cases, an IconButton is to be used to render a button with a tooltip

ToggleTip

This component replaces the interactive use-case of the Tooltip component. Specifically, tooltips may no longer have interactive descendants. As a result, this component allows users to have interactive descendants in popovers using a disclosure pattern. This component toggles the visibility of the popover by clicking on the trigger.

Disclosure

This is a pattern used throughout the codebase that mirrors the WAI-ARIA Authoring Practices pattern for disclosure: https://w3c.github.io/aria-practices/#disclosure

This is provided through a hook called useDisclosure and can be applied to a trigger and element to be revealed.

DefinitionTooltip

This component replaces TooltipDefinition. It is used in the flow of text in order to provide more details about a term. The challenge with this component is that there isn't a clear interactive element to be used for the trigger. Currently, we use a button where the label of the button is the term and the description of the button is the contents of the tooltip. However, this means that activating the button does nothing and could be confusing to the end-user.

Questions

• Does the definition tooltip contain interactive descendants?
• Is this something that role="term" and role="definition" could help us out with?

Tasks

• Bring popover over the finish line (excluding auto placement)
• Tooltip #9464
• Tooltip Component #8305
• Add initial IconButton component and update Button to not have icon functionality
• DefinitionTooltip
  • Determine implementation for definition tooltip #9902
• Update components to use popover
  • Dropdown
  • Inline Dropdown
  • MultiSelect
  • Filterable MultiSelect
  • Combobox
  • Menu?
• ToggleTip #10280

Migration

These are the components we need to keep in mind when migrating

• Tooltip (Interactive tooltip)
• TooltipDefinition
• TooltipIcon