HelpPopover
A small help panel with an optional title and a short paragraph, opened from a ? icon beside a label or setting.
Master
Switch position and trigger. Open pins the panel; turn it off, then hover, Tab or click the ? icon.
Usage
Wrap one focusable trigger, usually a ? help icon, in HelpPopover and pass title and content. It shows on hover and keyboard focus, and a click or tap pins it open until a click elsewhere, Escape, or another click. Form fields already use it: pass help on Input, Textarea, Select, DatePicker, FormulaEditor or FormDisplay and the label becomes the title. For a one-line name on an icon button, use Tooltip. See contracts/helppopover.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
- A ? icon beside a form label or a setting that needs a sentence or two of explanation.
- Help that needs a title, like the name of the field it explains.
Don'ts
- Do not invent Popover, HoverCard, InfoTip, ContextInfo or a local help panel.
- Do not use for an icon button's name. Use Tooltip.
- Do not put links, buttons or forms in it. Use Modal.
- Do not put required instructions in it. Use the field's hint.
- Do not use raw hex.
<HelpPopover title="Tax ID" content="The number on your tax registration, like EU123456789. We print it on every invoice." position="below" open > <Button emphasis="minimal" size="sm" iconOnly iconStart="help_center">About Tax ID</Button> </HelpPopover>