Tooltip
Code
| 1 | const [open, setOpen] = useState(false) |
| 2 | |
| 3 | // Three variants — pick one by changing enter/exit keyframes + duration: |
| 4 | // Fade: { opacity: [0, 1] } 400ms outExpo |
| 5 | // Slide: { opacity: [0, 1], translateX: [-16, 0] } 450ms outQuart |
| 6 | // Bounce: { opacity: [0, 1], scale: [0.6, 1], |
| 7 | // translateY: [10, 0] } 600ms outBack |
| 8 | |
| 9 | <div onMouseEnter={() => setOpen(true)} onMouseLeave={() => setOpen(false)}> |
| 10 | <AnimePresence mode="sync" initial={false}> |
| 11 | {open && ( |
| 12 | <AnimePresenceChild |
| 13 | key="tip" |
| 14 | enter={{ opacity: [0, 1], scale: [0.6, 1], translateY: [10, 0] }} |
| 15 | exit={{ opacity: [1, 0], scale: [1, 0.6], translateY: [0, 10] }} |
| 16 | duration={600} |
| 17 | ease="outBack" |
| 18 | > |
| 19 | <span className="tooltip">Bounces in</span> |
| 20 | </AnimePresenceChild> |
| 21 | )} |
| 22 | </AnimePresence> |
| 23 | <button>Hover me</button> |
| 24 | </div> |
Hover-triggered tooltip with three animation variants: Fade, Slide, and Bounce.
Live preview
TooltipHover any target to reveal
fade
slide
bounce
Props
| Name | Type | Default | Description |
|---|---|---|---|
| enter | UseAnimeOptions | - | Enter keyframes — opacity, translateX, scale, translateY |
| exit | UseAnimeOptions | - | Exit keyframes (mirror of enter) |
| mode | 'sync'|'wait'|'popLayout' | 'sync' | Enter/exit sequencing |
| duration | number | 400-600 | Enter/exit ms (400 fade, 450 slide, 600 bounce) |
| ease | string | 'outExpo'|'outQuart'|'outBack' | Per-variant easing |