KQ-008 · CALLOUT
Callout
A tooltip with a leader line — the label pops from the anchor while a schematic elbow line draws itself to the card.
KQ-008 · CALLOUT
Spring assembly · SA-201
Install
One command — the source lands in your repo. Or copy it from the Code tab.
$ pnpm dlx shadcn@latest add @kinetiq/callout
Props
- content
- ReactNode
- default —
- Label content. Never put interactive elements here.
- side / align
- "top" | "right" | "bottom" | "left" / "start" | "center" | "end"
- default "top" / "center"
- Anchor side and cross-axis alignment.
- delay
- number
- default 150
- Hover open delay in ms. Keyboard focus opens instantly.
- followCursor
- boolean
- default false
- Label trails the pointer with drift-damped lag; leader line omitted.
- disabled
- boolean
- default false
- Never opens.
| Prop | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | Label content. Never put interactive elements here. |
| side / align | "top" | "right" | "bottom" | "left" / "start" | "center" | "end" | "top" / "center" | Anchor side and cross-axis alignment. |
| delay | number | 150 | Hover open delay in ms. Keyboard focus opens instantly. |
| followCursor | boolean | false | Label trails the pointer with drift-damped lag; leader line omitted. |
| disabled | boolean | false | Never opens. |