Overlays

Tooltip

A navy label for icon buttons and truncated text. Waits 400ms on hover, shows at once on keyboard focus, never holds anything interactive. Phones have no tooltips: use visible labels.

Live specimen

Lifted from the approved family page at build time; interact with it.

Tooltip

Names an icon, or says why something is off. Never holds an action or anything you must read to finish a task.

Copy handle CIcon button
Publish to brandsAdd 3 photos before publishingDisabled, says why
USD unverifiedRate 1.26, last checked 12 Sep by PriyaStatus detail
rjdtc_••••f3a9Masked. Reveal is logged to the audit trail.Wraps at 232
Copy handle CPreview on site PRotate keyDelete photoHover waits 400 ms; keyboard focus shows it at once.
Tooltip trigger

Hover and focus show the same tip.

default
hover
Copy handle
focus
Copy handle
disabled
Nothing to copy yet
UsesTooltip.tt.tip--primary--tooltip-delay (raised)

from families/overlays/#tooltip