📖 Step 3: Design - UI Components & Patterns#66 / 291
Tooltip
Tooltip
📖One-line summary
A small explanatory bubble that appears on hover.
✨Example
Hover the icon
⚡Vibe coding prompt examples
>_
Build a tooltip that explains an icon on hover. Set direction (top/bottom/left/right) via a prop, and auto-flip near screen edges.
>_
Build a tooltip that also works on touch devices. Show on long press and dismiss when tapping elsewhere.
>_
Build a rich tooltip. Allow not just text but also images and links, and keep it visible while the mouse is over the tooltip.
Try these prompts in your AI coding assistant!