DS0
Components

Tooltip

A brief text label that appears on hover or focus.

Usage


<Tooltip>
  <Tooltip.Trigger><button>Hover me</button></Tooltip.Trigger>
  <Tooltip.Content>Helpful text</Tooltip.Content>
</Tooltip>

Delay

Default delay is 700ms. Set delayDuration={0} for instant.

Accessibility

KeyAction
EscapeCloses the tooltip
  • role="tooltip" on content
  • Trigger has aria-describedby pointing to content
  • Popover — Rich interactive content

Popover

A non-modal overlay anchored to a trigger.

Drawer

A slide-out panel attached to an edge of the screen.

On this page

UsageDelayAccessibilityRelated