Tooltip
also known ashover hint · info tip · label balloon
A small, transient label that appears on hover or focus to explain an icon, button, or truncated text.
A tooltip is a small floating label, usually with a dark background and white text, that appears next to an element on hover or keyboard focus. It explains what an icon-only button does, shows the full text of a truncated label, or reveals a keyboard shortcut.
Good tooltips are short — ideally 1–6 words — and appear after a brief delay (200–500ms) so they don't flicker as the cursor passes over multiple elements. They include a small arrow pointing at the source element and disappear immediately when the cursor leaves.
Tooltips must never contain critical-path information, since touch users and keyboard users without proper focus handling won't see them. Reserve them for nice-to-have clarifications and keyboard-shortcut hints.
- Icon-only buttons that need a text label
- Truncated text where the full string is useful on hover
- Keyboard shortcut hints (`⌘S = Save`)
- Form field clarifications next to a `?` icon
- Critical instructions — make them visible inline
- Touch-first products — there's no hover
- Long explanations — use a popover or inline help instead
- +Delay appearance by 200–500ms to avoid flicker
- +Trigger on focus too, not just hover, for keyboard accessibility
- +Keep content under 6 words when possible
- +Show the keyboard shortcut as a styled chip inside the tooltip
- −Don't put interactive elements (buttons, links) inside a tooltip — use a popover
- −Don't show tooltips on touch devices via long-press unless it's discoverable
People also ask
Tooltip vs popover — what's the difference?
Tooltips are small, text-only, transient, and appear on hover. Popovers are larger, can contain rich content (forms, lists, buttons), are click-triggered, and stay open until explicitly dismissed.