Done
Components

Tooltip.

A tooltip is a short, user-triggered label that explains the control it points at — most often an icon with no visible text. It appears on hover and on keyboard focus, and it disappears, which decides everything else about it: nothing a person needs in order to finish a task can live only in a tooltip. Field requirements, error text and instructions belong on the page. If a tooltip would only repeat a label that is already visible, leave it out.

Location

Four sides. The default is Top; the other three cover the edges where a tooltip above would run off-screen or hide what it describes.

Top
Top
Right
Right
Bottom
Bottom
Left
Left
React location
Figma Location
When to use
top
Location=Top
The default. Use it unless the trigger sits close to the top of the viewport.
bottom
Location=Bottom
When the trigger is near the top edge, or when a tooltip above would cover the thing it describes.
left
Location=Left
Trigger at the right edge — a row action at the end of a table row.
right
Location=Right
Trigger at the left edge — a sidebar icon, or a leading info icon in a form.

The four variants are the design surface, not the behaviour. The component does not know where the viewport edge is, so flipping from Top to Bottom when there is no room above is a runtime job — see the collision note in the props draft. Pick a location per placement in the design, and let the implementation flip it when it has to.

Placement

Location decides which side; Placement decides where along that side.

Edit line
Start

Tip near the leading edge. For a trigger at the start of its row.

Edit line
Middle

The default. Tip centred under the bubble.

Edit line
End

Tip near the trailing edge. For a trigger at the end of its row.

Placement moves the tip along the edge without moving the bubble, which is what keeps a tooltip inside the container when its trigger sits near a corner.

Tip

Keep the tip on wherever controls sit close together — a toolbar, a row of icon buttons, a table row action column.

Duplicate
Tip = on

The default. The arrow says which control the text belongs to.

Duplicate
Tip = off

No arrow. Only safe when the trigger is isolated.

Without it, a floating bubble between two icons belongs to neither of them, which is the failure NN/g documents in the PowerPoint example.

Anatomy

Search by image
Location = Top, Placement = Middle, Tip = on
Part
Spec
Bubble height
32 px for one line of 16 px text on a 24 px line height
Padding
4 px top and bottom, 8 px left and right
Label
Manrope Regular 16 / 24 px, #FFFFFF
Background
#000000 — 21:1 against the label, the strongest contrast in the system
Radius
4 px
Tip
6 px tall, a separate layer below the bubble; Placement slides it along the edge
Total height
38 px with the tip on, 32 px with it off
Max width
Not set. The bubble hugs its text, so a long string runs off as one line instead of wrapping. Proposed 300 px.
Offset from trigger
Not defined in the component. Proposed 8 px, measured from the tip, not the bubble.

Do & don't

Edit line

Do — explain a control that carries no visible label.

Add new line
Add new line

Don't — repeat a label the control already shows — it costs a hover and says nothing.

Search by image

Do — keep it to one short line of microcontent.

Must be 8+ characters, one capital, one number and one symbol
Password

Don't — hide anything the user has to act on in a tooltip — it disappears the moment they reach for the field.

Delete line

Do — keep the tip on where controls sit close together, so the text has an owner.

Delete line

Don't — drop the tip in a crowded toolbar — the bubble then belongs to none of the three.

Accessibility

Property
Notes
role="tooltip"
On the bubble. It is a description — not a dialog, not a live region, and it never takes focus.
aria-describedby
On the trigger, pointing at the bubble id. This is the right wiring whenever the trigger already has a visible label or an aria-label.
aria-labelledby
Only when the tooltip is the trigger’s sole accessible name, as on an unlabelled icon button. Never both this and aria-describedby.
Focusable trigger
A tooltip attached to something nobody can reach is a tooltip nobody can read. Wrap a button, link or input — not a bare div.
Hover and focus
Opens on both. A mouse-only tooltip is invisible to keyboard users, which is the failure NN/g documents on McDonalds.
Dismissable
Escape closes it and leaves focus where it was. WCAG 1.4.13.
Hoverable
The pointer must be able to travel from the trigger onto the bubble without it vanishing. WCAG 1.4.13 — the reason MUI ships its tooltip interactive by default.
Persistent
It stays until hover or focus leaves, or the user dismisses it. No timeout. WCAG 1.4.13.
Never the only source
Nothing needed to finish a task lives only in here. Field requirements, error text and instructions belong on the page.
No interactive content
No links, no buttons, nothing focusable inside. A tip that needs a button is a Popover.
Touch
There is no hover on touch. Either long-press, or move the content behind an info button as a Popover — do not leave it unreachable.
Contrast
#FFFFFF on #000000 measures 21:1, the strongest pair in the system. Nothing to fix.
Announced as
The trigger’s name, then the tooltip as its description: "Edit line, button, edit the selected line."

Props (React) — draft

// DRAFT. Derived from the Figma properties plus the WAI-ARIA tooltip pattern
// and the MUI Tooltip accessibility notes.
// Anything marked (proposed) does not exist in the Figma component yet.

type TooltipProps = {
  content: string;                                  // Figma: the bubble label
  location?: "top" | "right" | "bottom" | "left";   // Figma: Location, default "top"
  placement?: "start" | "middle" | "end";           // Figma: Placement, default "middle"
  tip?: boolean;                                    // Figma: Tip, default true
  children: ReactNode;                              // (proposed) the trigger it wraps
  describesTrigger?: boolean;                       // (proposed) describedby vs labelledby
  open?: boolean;                                   // (proposed) controlled
  enterDelay?: number;                              // (proposed) ms
  leaveDelay?: number;                              // (proposed) ms
  maxWidth?: number;                                // (proposed) 300; component sets none
  offset?: number;                                  // (proposed) 8, measured from the tip
  flip?: boolean;                                   // (proposed) collision detection, default true
  disabled?: boolean;                               // (proposed)
};

// Escape must close it even when open is controlled - WCAG 1.4.13.
// The bubble is hoverable by default: leaveDelay has to be long enough for the
// pointer to travel from trigger to bubble, or the same criterion fails.
// location is a starting preference, not a guarantee. With flip on, the runtime
// may render the opposite side; the four Figma variants document the options,
// not the final position.
← PreviousMenu
Sprout · Aceve Design System · v3.27.0