Components · Messages

Tooltip

A few words that explain a control, on hover or focus.

Try itChange the motion setting at the top to feel each personality.

Use it

<Tooltip label="Exits are quicker than enters">
  <Button variant="quiet">Why?</Button>
</Tooltip>

How it moves

When	Role	What moves
The pointer or keyboard focus arrives	enter	Fades in and rises by the enter distance, growing from the enter scale
The pointer or focus leaves, or Escape is pressed	exit	Fades out and drops by the exit distance

Rules:

A tooltip explains. It never carries something the person must read to continue, because touch screens may never show it.
It appears above the thing it describes and does not follow the pointer.
It leaves quicker than it arrives.

Reduced motion: the enter and exit distances are 0, so the tooltip fades in and out where it stands.

Not handled yet: the tooltip always opens above and centered. It does not move itself to stay on screen near an edge.

CSS variables used: --ss-motion-enter-distance, --ss-motion-enter-spring, --ss-motion-enter-spring-duration, --ss-motion-exit-distance, --ss-motion-exit-duration, --ss-motion-exit-easing.