Overlay
Tooltip
Tooltip is a very short label that pops up next to an element when you hover over or focus it, explaining controls whose meaning isn't obvious at a glance.
Definition
A tooltip is a very short label that pops up next to an element when you hover over it with the mouse or focus it with the keyboard. It's especially handy for elements whose meaning isn't obvious at a glance, like icon buttons that show a picture but no text label. Attach a tooltip reading "Settings" to a gear icon, for example, and users no longer have to guess what the picture means. You can place a tooltip above, below, to the left, or to the right of the element that triggers it, and it usually positions itself automatically so it doesn't run off the edge of the screen. Tooltips are small, and they show only for as long as the user stays on the element, so they barely disturb the flow of the page.
Why does it matter?
A tooltip is a quiet helper: it hands information only to the people who want it, without cluttering the screen. If you put a text label next to every icon, the interface fills up fast, but a tooltip stays hidden until the user is curious, then appears just for that moment, saving space. That lets a toolbar or a cramped screen stay clean while still making each button's meaning clear. The important thing to remember, though, is that a tooltip is always a "nice to have" extra. If you design so that users can only figure out their next move by reading the tooltip, they'll be lost the moment it doesn't show up. That's an even bigger problem for people who don't use a mouse, or who navigate by listening to the screen. So use tooltips with the mindset that they're a bonus that aids understanding, not a vault where you hide essential information. Follow that one rule and a tooltip becomes a reliable ally that keeps your interface light.
Common mistakes
- Forgetting that touch devices have no mouse hover. Phone users have no way to hover over an element, so they never see the tooltip at all. If you put important information only in a tooltip, that information disappears entirely for them.
- Stuffing paragraph-length text or interactive elements like buttons and links inside a tooltip. A tooltip is a spot for a one-line label, so if the content is long or needs a click, it belongs in a popover or in inline help instead.
- Making the tooltip appear the instant the mouse arrives and vanish the moment it drifts away. With no delay, the tooltip flickers whenever the cursor merely passes over the element, which is more distracting than helpful.
Practical tips
- Never rely on a tooltip alone for important information. Keep the tooltip content to a single short line, and when it starts to grow, move it to a popover or to help text that's always visible on screen.
- Make the tooltip appear on keyboard focus, not just mouse hover. Keyboard-only users and screen reader users then get the same explanation, which improves accessibility a great deal.
- Add a very short delay before it appears, so it shows up only when the cursor lingers, not when it briefly grazes the element. That one small pause makes the whole screen feel much calmer.
Ask your AI
In the code below, find every button that's icon-only with no text label and give each one a short one-line tooltip that fills in its meaning. Make the tooltip appear on keyboard focus, not just mouse hover, and wire it up for screen readers with aria-label and aria-describedby on the button plus role='tooltip' on the tooltip. Add a short 300–500ms delay before it shows so it appears when the cursor lingers, not when it just grazes past, and auto-position it above/below/left/right so it never runs off the screen edge. Since a tooltip is only a bonus, also check whether users can still tell what each button does from the screen alone if the tooltip never shows up.
Go through the tooltips in the code below one by one and catch four things. (1) If any important info lives only in a tooltip — touch and screen-reader users never see it — pull it into always-visible text or show it in both places; (2) if paragraph-length text or a button/link is stuffed inside a tooltip, keep only the one-line label and move the rest to a popover; (3) if a tooltip pops in and out instantly and flickers, add a 300–500ms delay; (4) if it only shows on hover, make it show on keyboard focus too. For each one, give me a table of where it broke the rule, the fixed code, and why.
I want to put this inside a tooltip — tell me if that's right: [the content — e.g. a 3-line payment-failure reason plus a Retry button]. A tooltip is strictly for a short one-line label, so anything paragraph-length or that needs a click like a button or link belongs in a popover or always-visible inline help, not a tooltip. Decide whether my content can shrink to a one-line label or should move to a popover instead, and give me a markup example for each path. If it stays a tooltip, build the version that appears on both hover and keyboard focus with a 300–500ms delay.