01
Tooltip — inverse contrast, four placements
product implementation · Tooltip.tsx · @tippyjs/react
Tooltips are the highest-contrast surface in the system — foreground swaps to the opposite mode: dark mode shows a near-white pill with dark text, light mode shows a near-black pill with white text. This guarantees the tooltip always stands out against whatever it's anchored to.
Source uses --hi-contrast / --lo-contrast tokens, the same pair shared by the dropdown menus.
Cast to TV
Open Chromecast picker
API token
Generated tokens can't be edited.
Bg / fg
hi-contrast / lo-contrast
inverse of current theme
Padding · radius
5×10 px · 4px
small, tight, never wraps
Font
12px · 400
sentence case, no period
Delay
[500, 0] ms
slow in, instant out