📖 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!