Tooltip

Fades in and rises a few pixels. Never pulls the eye.

Live demo

The preset here changes the whole site. Slow motion and reduced motion change this stage only.

Reduced motion

Frame by frame

Every frame of the movement, on top of each other. Wide gaps are fast. Ghosts past the dashed outline are overshoot. It updates with the preset.

22 frames at 60 fps. Settles in 336 ms, no overshoot.

When to use

Tooltips and short hints on hover or focus. The tooltip fades in and rises distance.sm, the smallest travel in the kit. It must never pull the eye away from the pointer.

Show it on keyboard focus as well as hover, and close it with Esc. Keep the text to a few words. If it needs a link or a button, it is a popover: use menu.

Recipe

Tooltips and hints. Fades in and rises distance.sm. The smallest travel in the kit, so it never pulls the eye from the pointer.

States of the tooltip recipe
State	Property	Token	Now
initial	opacity	literal	0
	y	{distance.sm}	5
animate	opacity	literal	1
	y	literal	0
exit	opacity	literal	0
	y	literal	0
transition	Movement (spring)	{spring.fast}	stiffness 715 · damping 53
transition	Fade duration	{duration.fast}	132ms
transition	Fade easing	{easing.enter}	cubic-bezier(0, 0, 0, 1)
transition	Exit duration	{duration.fast}	132ms
transition	Exit easing	{easing.exit}	cubic-bezier(0.3, 0, 1, 1)

Tokens used

spring.fast stiffness 715 · damping 53
duration.fast 132ms
easing.enter cubic-bezier(0, 0, 0, 1)
easing.exit cubic-bezier(0.3, 0, 1, 1)
distance.sm 5px

Code

/* tooltip: Tooltips and hints. Fades in and rises distance.sm. The smallest travel in the kit, so it never pulls the eye from the pointer.
   Use: <div class="motif-tooltip" role="tooltip">. Exit with data-state="closed". */
.motif-tooltip {
  transition:
    opacity var(--motif-duration-fast) var(--motif-ease-enter),
    transform var(--motif-spring-fast-duration) var(--motif-spring-fast),
    filter var(--motif-duration-fast) var(--motif-ease-enter),
    clip-path var(--motif-spring-fast-duration) var(--motif-spring-fast);
}
@starting-style {
  .motif-tooltip {
    opacity: 0;
    transform: translateY(var(--motif-distance-sm));
    filter: none;
    clip-path: none;
  }
}
.motif-tooltip[data-state="closed"] {
  opacity: 0;
  transform: none;
  filter: none;
  clip-path: none;
  transition:
    opacity var(--motif-duration-fast) var(--motif-ease-exit),
    transform var(--motif-duration-fast) var(--motif-ease-exit),
    filter var(--motif-duration-fast) var(--motif-ease-exit),
    clip-path var(--motif-duration-fast) var(--motif-ease-exit);
}

/* Reduced motion: the variable overrides at the end of motif.css set
   travel to 0, scale to 1, and blur to 0, so this recipe needs no extra rule. */

Reduced motion

No rise. The tooltip fades in and out at duration.fast.
Fades take 132ms (duration.fast), so the state change stays visible.
Turn on the Reduced motion box under the demo to preview it, or set your system to reduce motion.