Tooltip
A tiny label that appears on hover or focus to say what something does. Text only, and never the only copy.
See it
What it is
A tooltip is a few words that appear next to a control on hover or keyboard focus, naming it or explaining what it does. Its best job by far is labelling icon-only buttons, where the icon is a guess until the tooltip confirms it. Text only, short, no buttons, no links: the moment it contains something clickable, you have built a popover.
The browser gives you one for free via the title attribute, and it is bad: a roughly one-second delay you can't tune, no styling, inconsistent screen reader handling, and nothing at all on touch. Real implementations (Radix, Floating UI) add an open delay of 300 to 700ms and a delay group, so once one tooltip in a toolbar is open the neighbours appear instantly as you sweep across, the way Figma's toolbar behaves.
Gotcha: hover does not exist on a phone. Anything that lives only in a tooltip is invisible to half your users, so never put required instructions, error text, or the only copy of a value in one. Wire it with aria-describedby, which is what the ARIA tooltip pattern actually asks for. The icon button underneath still needs its own name from aria-label or visually hidden text, so it is never nameless while the tooltip is closed. Show it on focus as well as hover, and follow WCAG 1.4.13: dismissible with Escape, hoverable without disappearing, and persistent until the pointer or focus leaves. Disabled controls are their own headache: a native disabled button cannot take keyboard focus at all, and whether it fires pointer events varies by browser and by how you disabled it, so if the tooltip has to explain why something is off, hang it on a focusable wrapper around the control instead.
Ask AI for it
Add tooltips to the icon-only buttons in this toolbar. Dark rounded bubble (6px radius, 12px text, 6px by 10px padding, subtle shadow), positioned below the trigger with a 6px offset and a small arrow, flipping above when near the viewport edge. Open after a 400ms hover delay and instantly on keyboard focus, close on pointer leave, blur, and Escape. Use a shared delay group so moving between adjacent buttons shows the next tooltip with no delay. Render it with role='tooltip' and link it to the button with aria-describedby, and give every icon button its own aria-label so it stays named while the tooltip is closed. Keep the copy to two or three words, and never put links or buttons inside. Fade in over 120ms and skip the animation under prefers-reduced-motion.