Toggletip
A click-to-open info tip for form labels that announces its text in a live region and closes on Escape or an outside click.
Preview
Workspace settings
Press the small i next to a label for help.
Where files and backups are stored. It can't be changed after the workspace is created. Compare regions
days
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | The topic; names the button "About <label>". Required. |
| children | ReactNode | — | Short help text; links are fine. Announced through a live region. Required. |
| side / align | "top" | "right" | "bottom" / "start" | "center" | "end" | "top" / "center" | Where the bubble opens. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — / false / — | Controlled or uncontrolled. Escape and outside clicks close it. |
| icon | "info" | "help" | "info" | Shows "i" or "?". |
| size | "sm" | "md" | "sm" | 16 or 20 px button. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.