Component · overlay

Liquid glass tooltip

Short label for a control.

Also called hint

A small shortcut tooltip floating above the first of three round icon buttons, over zoomed desert ridges.
A small shortcut tooltip floating above the first of three round icon buttons, over zoomed desert ridges. (light)
A small shortcut tooltip floating above the first of three round icon buttons, over a zoomed night skyline.
A small shortcut tooltip floating above the first of three round icon buttons, over a zoomed night skyline. (dark)

Spec

Material
tint or regular
Profile
squircle
Geometry
capsule 24–28 tall, text 12 px, 6–8 px above the control
Bezel (px)
12
Displacement (px)
12–16
Blur (px)
1–2

Anatomy

  • small glass capsule
  • text + shortcut (e.g. Undo — ⌘Z)

States

  • hidden
  • shown after 400–600 ms

Rules

  • Never overlaps its control.