Tooltip

Feedback · src/components/Tooltip/Tooltip.tsx

A short label on hover or focus.

Never the only place something is said. A tooltip is unavailable on touch, invisible in print and gone from a screenshot, so anything a person needs belongs in the interface itself. Good for the name of an icon-only control, bad for an explanation.

The wrapper takes a tabIndex by default so a keyboard user can reach the tip at all - hover-only would put it out of reach. Pass focusable={false} when the child is already a button, or Tab lands twice on the same thing.

aria-describedby rather than aria-label, so the tip supplements the control's name instead of replacing it.

Import

import { Tooltip } from '@redrob-labs/ui';

Rendered

The design system's own preview case, run against this package's build. The parity gate compares this rendering to the reference bundle's.

Props

Prop	Type	Notes
content	React.ReactNode	The text. Short - a tooltip is a label, not documentation.
placement	'top' | 'bottom' | 'left' | 'right'
open	boolean	Forces it visible. For a screenshot or a walkthrough, not for normal use.
focusable	boolean	false when the child is already focusable, so focus is not taken twice.
className	string
children	React.ReactNode