Animated Tooltip
A tooltip that springs in and tilts in 3D as the pointer moves across its trigger.
Crafted by design engineers
ALGHATKJLC
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/animated-tooltip.json"AnimatedTooltip wraps any trigger. On hover or focus the tooltip springs in and
tilts toward the pointer in 3D, following the cursor across the trigger.
Usage
tsx
import { AnimatedTooltip } from "@/components/godui/animated-tooltip";tsx
<AnimatedTooltip content="Design Engineer">
<button>Hover me</button>
</AnimatedTooltip>Side
tsx
<AnimatedTooltip content="Below" side="bottom">
<Avatar />
</AnimatedTooltip>Props
| Prop | Type | Default | Description |
|---|---|---|---|
content | ReactNode | — | Tooltip content shown on hover / focus. |
side | "top" | "bottom" | "top" | Which side of the trigger the tooltip shows. |
children | ReactNode | — | The trigger the tooltip is attached to. |
AnimatedTooltip also forwards every standard <span> attribute to the root element.