Skip to content

ComponentsTooltip

Components

Tooltip

Labels for icon buttons and controls: 300ms delay, 120ms fade + .98 scale, shortcut and description slots, disabled reasons, overflow labels.

Tooltip

Single line: 24 tall, padding 3/8, radius 6, 13/18. Opens 300ms after hover or on keyboard focus; moving to the next trigger within 300ms shows it at once without animation. Never on touch.

Icon buttons (instant between neighbours)
With shortcut
Two lines (description slot)
Wrapping (240, balanced) and wide (400)
Disabled with a reason
Managed by your organization
Overflow only (TooltipOverflow)
quarterly-report-final-v3-reviewed-by-finance-and-legal.pdfnotes.mddesign-tokens-light-and-dark-mode-comparison-sheet.xlsx

Light and dark

Light: #fff ink on #0b0b0b, no ring; dark: #303030 (the popover surface) / white 93% with an inset white-4% ring. The content is a dark scope in both modes, so the 12px shortcut glyphs read secondary (white 57%).

light
Search ⇧⌘K
dark
Search ⇧⌘K