Tooltip
A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
Install
One package and one stylesheet. The stylesheet carries the tokens every component reads.
pnpm add @wolf-rayet/reactimport '@wolf-rayet/react/css/wolf-rayet.css';
import { Tooltip } from '@wolf-rayet/react';Props
A required prop is marked with an asterisk.
| Prop | Type | Default | Description |
|---|---|---|---|
| content * | string | — | The label. A few words, and plain text only, because a tooltip cannot be interacted with. |
| children * | ReactNode | — | The element the tooltip describes. It must be focusable, or keyboard readers never see the tooltip. |
| position | 'top' | 'bottom' | 'bottom' | Which side it appears on. Bottom is the default and is usually right. |
Accessibility
What the component does for you, and what it needs from you.
- The tooltip is tied to the element it describes, so it is announced with it rather than as loose text.
- It appears on focus as well as hover, which is what makes it reachable from a keyboard.
- It is not available on touch at all, which is the reason nothing essential can live in one.
- The ground is the boldest neutral, so it inverts in dark and carries dark text there.