019
Tooltip
OverlayHover or focus the button
Customize
Side
Align
Pin open
Code
<Tooltip content="Copy to clipboard"> <Button>Copy</Button> </Tooltip>
Install
npx shadcn@latest add https://components.haedong.dev/r/tooltip.json
Props
Wraps the single child element (the trigger) in an inline span and attaches the hover / focus handlers and aria-describedby to it.
| Prop | Type | Description |
|---|---|---|
| content | ReactNode | The one line shown. |
| side | "top" | "bottom" | Which side of the trigger. Defaults to "top". |
| align | "start" | "center" | "end" | Horizontal alignment to the trigger. Defaults to "center". |
| delay | number | ms of hover before showing. Focus shows immediately. Defaults to 300. |
| open | boolean | Force it visible (documentation, tests). Otherwise hover / focus decide. |