Tooltip
Animated tooltip with spring entrance and directional offset. Supports hover and focus interactions with configurable side and delay.
Live preview
Win the
, then — that’s the half in two beats.
Hover the calls or
.Install
v0
Ship the tooltip registry item to v0, then iterate on copy, tone, and microinteractions with prompts.
Usage
Wrap any trigger with the component and pass tooltip body via content.
import { tooltip as Tooltip } from "@/components/ui/tooltip";
export function HelpLabel() {
return (
<Tooltip content="Changes are saved automatically" side="top" delay={0.1}>
<button className="rounded-md border px-3 py-1.5 text-sm">
Autosave
</button>
</Tooltip>
);
}API & dependencies
children (required)
The trigger element. Tooltip opens on mouse enter or keyboard focus and closes on mouse leave or blur.
content (required)
Tooltip body. Accepts any React node, so plain text and rich inline markup both work.
side (optional)
Placement around the trigger: "top", "bottom", "left", or "right". Default is "top".
delay (optional)
Open delay in seconds before showing the tooltip. Default is 0.15 to avoid accidental flicker.
className (optional)
Appended to the tooltip bubble. Use it to change sizing, colors, or typography while keeping default motion.
framer-motion
Drives AnimatePresence mount/unmount, spring scale, directional offsets, blur fade, and arrow pop animation.
shadcn registry
Registry item includes framer-motion so the install command brings in animation support.