Tooltip
A tooltip is a floating label that explains an element or feature. It has no actions.
Install
One package and one stylesheet. The stylesheet holds the tokens every component uses.
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 | None | The label. A few words of plain text only, because people cannot interact with a tooltip. |
| children * | ReactNode | None | The element the tooltip describes. It must be focusable, or keyboard users will never see the tooltip. |
| position | 'top' | 'bottom' | 'bottom' | Which side it appears on. Bottom is the default and usually works best. |
Accessibility
What the component does for you, and what it needs from you.
- The tooltip is linked to the element it describes, so screen readers announce them together.
- It appears on focus as well as hover, so keyboard users can reach it.
- It does not work on touch screens, which is why nothing essential should go in one.
- The background is the boldest neutral, so in dark mode it turns light and uses dark text.