Animated Tooltip
Free
A tooltip that springs out of its trigger, leans toward the pointer and shows on focus too.
Customize
Side
250ms
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/animated-tooltip.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/animated-tooltip.tsx.
Usage
import { AnimatedTooltip } from "@/components/ui/animated-tooltip";
<AnimatedTooltip content="Copy link" side="top">
<button aria-label="Copy link">
<LinkIcon />
</button>
</AnimatedTooltip>Props
6 properties| Property | Type | Default | Description |
|---|---|---|---|
| content | ReactNode | — | What the tooltip says. |
| side | "top" | "bottom" | "left" | "right" | "top" | Side of the trigger the tooltip appears on. |
| delay | number | 300 | Hover delay in ms. Keyboard focus shows it at once. |
| open | boolean | — | Force the tooltip open or closed. |
| children | ReactElement | — | The trigger: one focusable element. It receives aria-describedby. |
| className | string | — | Extra classes for the bubble. |
Dependencies: motion