Tooltip
Brief extra text on hover or keyboard focus of one trigger. Short and non-essential.
Master
Switch position and trigger. Open pins the bubble; turn it off, then hover or Tab to the button.
Export includes all projects
Usage
Wrap one focusable kit piece, like a Button or an icon-only Button, in Tooltip and pass content. It shows after a short hover delay and at once on keyboard focus; Escape hides it. Keep it to a few words or one short sentence, and never put anything people must read or click in it. For a ? icon beside a field or setting, use HelpPopover; field help props already do. See contracts/tooltip.json for the full contract. A portaled panel takes the theme of whatever opened it, so it is dark with a dark app frame even though it is drawn at the end of the page.
Do's
- Naming an icon-only Button.
- A short hint on an icon button. For a ? help icon, use HelpPopover.
- Extra context that would clutter the layout if always shown.
Don'ts
- Do not invent Popover, HoverCard, InfoTip or a local tooltip. For a titled help panel, use HelpPopover.
- Do not put required instructions in a tooltip. Use the field's hint.
- Do not put links, buttons or forms in it. Use Modal.
- Do not wrap something people cannot focus, like plain text or a disabled Button.
- Do not use raw hex.
<Tooltip content="Export includes all projects" position="above" open > <Button>Export</Button> </Tooltip>