Tooltip

A short label shown next to an element on hover or keyboard focus. Four positions, two variants, optional arrow.

Usage

Import the component and render it.

import { Tooltip } from 'src/components/Tooltip/Tooltip';
import { Button } from 'src/components/Button/Button';

<Tooltip position="top" variant="default" label="Tooltip Text" hasArrow>
  <Button variant="outline" size="sm">Hover or focus me</Button>
</Tooltip>

Accessibility

Role: tooltip (Radix Tooltip): the trigger is described by the label with aria-describedby while it is shown.

Key	Action
`Tab`	Focusing the trigger shows the tooltip; moving focus away hides it
`Escape`	Hides the tooltip

Shown on hover (after a short delay) and on keyboard focus; it stays while the pointer moves onto it (WCAG 1.4.13).
Only for short, supplementary text: never put essential information or interactive content in a tooltip.
A truncated label is still read in full by screen readers (Radix describes the trigger with the whole text), but sighted users only see the start: keep labels short.
The trigger must be focusable and have its own accessible name.

Position

Set the position prop: Top is "top", Bottom is "bottom", Left is "left", Right is "right".

Top

Bottom

Left

Right

<Tooltip position="top" label="Tooltip Text" />
<Tooltip position="bottom" label="Tooltip Text" />
<Tooltip position="left" label="Tooltip Text" />
<Tooltip position="right" label="Tooltip Text" />

Variant

Set the variant prop: Default is "default", Brand is "brand".

Default

Brand

<Tooltip variant="default" label="Tooltip Text" />
<Tooltip variant="brand" label="Tooltip Text" />

Used in

Tooltip is part of Sidebar.