Tooltip
A small contextual label that appears on hover or focus to provide additional information about an element.
Plain English
Tooltips deliver contextual help without cluttering the interface. They are appropriate for icon-only buttons (where the icon meaning is not self-evident), for truncated text (showing the full content on hover), and for keyboard shortcuts. The critical rule: tooltips are for additional information, not for essential information. If users must see the tooltip to understand how to use something, that is a design problem — the element itself should be more clear.
Technical
Implementation: absolutely positioned element, position: absolute or fixed, z-index: 400+, triggered by :hover and :focus-visible on the trigger. Arrow/caret via CSS pseudo-elements or SVG. Position: above, below, left, or right with preference for not going off-screen. Text: short, concise, no interactive elements inside a tooltip. Delay: 200-400ms before showing to prevent flickering during cursor transit. Accessibility: role="tooltip", aria-describedby on the trigger pointing to tooltip id. Do not put focusable elements inside tooltips.
Live Demo
Icon buttons with tooltips
Tooltip positions
Tooltips for icon-only buttons. Keep text under 5 words. Never put interactive content in a tooltip.
Usage
✓ Good usage
An icon-only "Archive" button shows tooltip "Archive this item (⌥⌘A)" on hover/focus — gives the label and keyboard shortcut without cluttering the UI.
✗ Bad usage
Putting required instructions ("You must fill this out") inside a tooltip — essential information must be permanently visible, not hidden behind hover.
Recommended values
- Max-width: 200-240px
- Padding: 6-8px 10-12px
- Font: 12-13px, regular weight
- Background: ink-900 (dark), white text — or white with border
- Border radius: 4-6px
- Show delay: 200-400ms
- z-index: 400+
Common mistakes
- Essential information in tooltips — must be permanently visible instead.
- Interactive elements (buttons, links) inside tooltips — keyboard users cannot reach them.
- No touch alternative — tooltips are hover-only, so icon-only buttons on mobile need labels.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Tooltips: dark background (ink-900), white text, 12px, 200-250px max-width, 6px padding, 4px border-radius, z-index: 400. Appear after 250ms delay. aria-describedby on trigger, role="tooltip" on tip. Never put essential information in a tooltip.