Tooltip
An animated tooltip that shows contextual info on hover or focus and smoothly glides to the next element without disappearing between transitions.
Installation
Props
TooltipProvider
| Prop | Type | Default |
|---|---|---|
children | React.ReactNode | - |
openDelay? | number | 700 |
closeDelay? | number | 300 |
transition? | Transition | { type: 'spring', stiffness: 300, damping: 25 } |
Tooltip
| Prop | Type | Default |
|---|---|---|
children | React.ReactNode | - |
side? | "top" | "bottom" | "left" | "right" | top |
sideOffset? | number | 4 |
align? | "start" | "center" | "end" | center |
alignOffset? | number | - |
TooltipContent
| Prop | Type | Default |
|---|---|---|
children | React.ReactNode | - |
TooltipTrigger
| Prop | Type | Default |
|---|---|---|
children | React.ReactElement | - |
Credits
- We take our inspiration from Shadcn UI for the tooltip style.