Rich Tooltip
A structured tooltip with a title, body, keyboard shortcut, small media slot and a learn-more link, using hover-card semantics so its content stays reachable.
Preview
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactElement | — | The trigger: one focusable element. Required. |
| title | ReactNode | — | Bold first line. Required. |
| body | ReactNode | — | A sentence or two. |
| shortcut | string[] | — | Keys shown as keycaps beside the title, e.g. ["⌘", "K"]. |
| media | ReactNode | — | A decorative band above the text (a drawn preview). |
| href / linkLabel | string | — / "Learn more" | A link at the bottom; the card stays open while the pointer moves in. |
| side / align | "top" | "right" | "bottom" | "left" / "start" | "center" | "end" | "top" / "center" | Placement around the trigger. |
| openDelay / closeDelay | number | 350 / 150 | Ms before opening and the grace period before closing. |
| open / defaultOpen / onOpenChange | boolean / boolean / (open) => void | — | Controlled or uncontrolled open state. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.