Tooltip

Example#

Volume

Paper

Colourway

Usage#

Use a tooltip to repeat a control's name or nearby words on hover and focus, mostly for icon buttons. It is a slab pill that opens after a short wait and closes at once.

Never the only copy. A tooltip repeats what the control's name or the page already says. Anything people need to read lives on the page.
No touch. Tooltips do not show on touch screens; the name is still announced, which is why it must not hold anything new.
Behaviour. It opens after 400 ms (300 ms when moving between triggers), can be hovered, and closes on Escape (WCAG 1.4.13).
More than a line, or anything with a link or a control, is a Popover.

Anatomy#

Volume#

Reading layer: identical at every volume.

Quiet
Copy link
Docs, forms, legal and long reads. Flat inks, no art in motion.
Studio
Copy link
The site default. Art on its own plates, one display moment per view.
Press
Copy link
Hero moments, covers and campaigns. Halftone fields and the second ink.
Rave
Copy link
Launches, posters and the 404. Every ink, and the words still win.

Content#

Repeat the control's name in sentence case: "Copy link".
One line, a few words, no full stop.
Never instructions, prices, errors or anything a reader must know.

Do and don't#

Repeats the name.

Don't

A fact nobody on a phone will ever see.

Touch screens never show tooltips, and many readers never hover. Anything worth knowing belongs on the page.

Accessibility#

Opens 400 ms after hover (300 ms while moving between triggers) and on keyboard focus; closes at once, on Escape, and stays open while hovered (1.4.13).
Touch never opens it; the trigger's own name is always announced.
Fades and grows from .96 in --mk-dur-menu; reduced motion keeps the fade only.

Keys	What happens
`Tab`	Focusing the trigger opens the tooltip after 400 ms
`Escape`	Closes the tooltip; focus stays on the trigger

The colour pairs it prints, with their contrast on both papers:

Text	Surface	Role	Bone	Night
`--mk-ink`	`--mk-paper`	label	16.49:1 · Lc 97.4, passes	16.21:1 · Lc 96.1, passes
`--mk-ink`	`--mk-paper-plate`	label	18.42:1 · Lc 105.1, passes	15.02:1 · Lc 95.4, passes
`--mk-on-slab`	`--mk-slab`	label	16.49:1 · Lc 98.7, passes	16.21:1 · Lc 95.1, passes
`--mk-on-slab`	`--mk-slab`	body-ui	16.49:1 · Lc 98.7, passes	16.21:1 · Lc 95.1, passes
`--mk-on-slab`	`--mk-slab`	long	16.49:1 · Lc 98.7, passes	16.21:1 · Lc 95.1, passes

Process at Studio, normal contrast. Every look: the press check.

Props#

Prop	Type	Default	Description
`content` required	`ReactNode`	none	The words; they equal or repeat the trigger's name or nearby text (20 §3).
`children` required	`ReactElement<unknown, string \| React.JSXElementConstructor<any>>`	none	One focusable element: it becomes the trigger.
`side`	`TooltipSide`	none
`open`	`boolean`	none
`defaultOpen`	`boolean`	none
`onOpenChange`	`((open: boolean) => void)`	none
`disabled`	`boolean`	none
`container`	`HTMLElement \| null`	`document.body`	Portal container (default `document.body`).
`specimen`	`boolean`	none	Docs and press frames only: prints the open pill in place under the trigger, with no portal or timers.
`className`	`string`	none

Generated from TooltipProps in packages/overprint-react/src/reading/tooltip/tooltip.tsx.

Tokens#

System tokens (14)

Its own properties (3)

--mk-tooltip-arrow
--mk-tooltip-pad-block
--mk-tooltip-pad-inline

Scanned from its CSS at build and checked against its registry entry; 6 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

MinorreactThe reading layer's controls, overlays, forms and visitor prefs (P2-T1 to P2-T5): every Button is the comic hit key, with IconButton, Link and Tooltip; Input, Textarea, Select, Checkbox and CheckboxGroup, Radio and RadioGroup, Switch, Slider with the ruler, RulerReadout and SegmentedControl; Dialog, Drawer, NavSheet, Tabs, Disclosure, Faq and faqJsonLd on Base UI 1.9 where the platform falls short; Field, Fieldset, Form with the site's inline validation, ErrorSummary, Callout, Honeypot, FormTimestamp and QuoteForm; PrefsScript under 1 KB, usePref and setPref with cross-tab sync, ThemeToggle and the visitor VolumeDial; VisuallyHidden.