Actions / Tooltip
Tooltip
A speech bubble that pops out of whatever it explains. Opens on hover and keyboard focus.
Client componentWCAG AASince v0.1
Priority sets who gets paged first.Sends your live location for 30 minutes.
import { Tooltip, IconButton, InfoIcon } from "@plop-ui/react";
<Tooltip content="Priority sets who gets paged first.">
<IconButton icon={<InfoIcon />} label="What does priority do?" />
</Tooltip>Change every prop live in the playground.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| children required | ReactElement<TriggerProps, string | JSXElementConstructor<any>> | — | The one element it explains. It must be focusable (a button, a link, or tabIndex={0}). |
| content required | ReactNode | — | What the bubble says. Keep it to a sentence. |
| className | string | none | — |
| open | boolean | false | Keep it open (for docs or onboarding). |
| side | "top" | "right" | "bottom" | top (centered above); bottom is for triggers near the top edge, like a header | Where the bubble points from. |
Use it well
DoExplain something short that people can do without: a sentence, at most.
Don'tPut the only copy of important information in a tooltip. Touch screens can't hover.
Accessibility
- role="tooltip", linked with aria-describedby.
- Opens on hover and keyboard focus; Escape closes it without moving focus.
- The trigger must be focusable.