Six reveal grammars
Use directional lift, edge wipe, spring landing, perspective flip, spotlight focus, or an editorial origin scale.
Guidance & microcopy
Animated Tooltip
Give small explanations a deliberate entrance, clear relationship, and complete input model. Tune placement and motion without turning essential content into a hover-only trap.
Updated two minutes ago
Microcopy with intent
A tooltip should arrive clearly and leave cleanly.
Tooltips work when their trigger remains obvious, the relationship is programmatic, and keyboard users receive the same information. Every exported preset supports hover, focus, click, Escape, and narrow containers.
Unique accessible relationships
Each runtime assigns scoped deterministic IDs and connects the trigger with aria-describedby and role=tooltip.
Responsive collision fallback
Side placements resolve below the trigger in narrow containers so the explanation never gets sliced offscreen.
Three-step workflow
How to use the Tooltip Motion studio
- Write the smallest useful explanation
Keep the trigger actionable and the tooltip concise enough to scan without becoming a hidden paragraph.
- Choose direction and intent delay
Match placement to available space, then use a modest delay that filters accidental pointer crossings.
- Test pointer and focus
Hover, tab, click, press Escape, and resize before copying the standalone component.
Questions, answered.
Can the tooltip contain essential instructions?
Prefer visible text for essential instructions. Tooltips are best for concise supplementary context.
Does keyboard focus open it?
Yes. Focus opens it, blur closes it, and Escape closes it while returning focus to the trigger.
Are IDs safe across multiple instances?
Yes. The exported runtime derives deterministic IDs from each instance's document order rather than shipping a duplicated fixed ID.
How is reduced motion handled?
Visibility changes remain available, but transforms, filters, delays, and animated transitions are removed.