Back to Dictionary
Onboarding & Tours
●○○Ready to Use
Tooltip Fade & Nudge
A tiny popover label that slides exactly 4-8px outwards from its anchor element while fading in. Used to label icon-only buttons.
Live Demo
What It Is
A tiny popover label that slides exactly 4-8px outwards from its anchor element while fading in. Used to label icon-only buttons.
✓When to Use
- Icon-only action buttons (e.g., Share, Delete, Edit)
- Glossary definition hovers
- Charts where hovering over a bar reveals exact metrics
✕When NOT to Use
- Critical form instructions (put them inline instead)
- Mobile apps (tooltips don't work well on touch)
Configuration Tips
- 01Initial state should be tucked slightly against the anchor (e.g., y: 4px for a top tooltip)
- 02Use an instant/very fast duration (100-150ms) to ensure it appears before the user moves away
You've Seen It In
Radix UILinearNotion
Prompt Templates
Copy and paste these prompts into your AI coding assistant.
Add a tooltip to this icon that drops down slightly and fades in when I hover over the icon.
Code Example (Tailwind CSS)
export function TooltipFadeNudgeDemo() {}