Figma tooltip components

A tooltip is the interface whispering. Done well, it names an ambiguous icon or adds a line of context exactly at the moment someone wonders about it, then gets out of the way before it becomes furniture. Done badly, it hides information people actually need behind a hover they'll never perform. The 2 tooltip components and 84 variants above handle the craft; the judgment calls are below.

What tooltips are for (and not for)

Nielsen Norman Group's tooltip guidelines draw the boundary: tooltips are for supplementary information, never for content users must read to complete a task. The test is brutal and useful: if deleting the tooltip breaks the flow, the information belongs in visible text instead.

The sweet spot is labelling icon-only buttons, expanding abbreviations, and adding a sentence of context to settings that need one. If you're writing a third sentence into a tooltip, stop: that content wants to be visible, or at minimum live in a popover the user deliberately opens.

Anatomy: label, supporting text, and seven arrows

The set includes a compact single-line tooltip for labels and a wider version with a supporting text block for short explanations. Both come with seven arrow options: none, top center, bottom center, bottom left, bottom right, left, and right, so the pointer can aim at its target from wherever the layout has room.

Position tooltips where they won't cover the very thing they describe, which usually means above or beside the target, and keep placement consistent across a toolbar so hovering along a row doesn't feel like whack-a-mole.

There's also a dedicated help icon component, the small "?" that invites a hover, with built-in open and closed states so the trigger and its tooltip travel as one piece. It's the right pattern next to a form label or a pricing line where a fuller explanation would clutter the layout.

Prototyping hover tooltips

The "while hovering" trigger is the one you want: it shows the tooltip while the cursor is over the target and hides it on exit, matching real behavior. Wire it inside the help icon component once and every instance works.

Figma's prototyping guide covers the trigger options, including the delay you'd add so tooltips don't flicker on every cursor pass. One known limitation to plan around: an element that both hovers and clicks in a Figma prototype can conflict, so test the combination early rather than at handoff.

Tooltip accessibility is mostly restraint

Two rules cover most of it. First, hover isn't the only way in: tooltips must also appear on keyboard focus, which is the heart of the W3C tooltip pattern, and why the trigger components here carry focused states.

Second, WCAG 1.4.13 requires hover content to be dismissible and hoverable, so users can move their cursor onto the tooltip without it vanishing. And remember that touchscreens have no hover at all, which loops back to the first rule: nothing essential lives in a tooltip, because a phone user may never see it.

When it's time to build, the same tooltips exist in code. Untitled UI React tooltips are open source, built with Tailwind CSS and React Aria, with focus triggers, dismissal, and positioning handled for you.