Hover Tooltip Fade
A hint fades up after a deliberate pause, so crossing a row of icons never sets off a flicker.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useCallback, useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
/**
* Vibary · Hover Tooltip Fade
*
* Tooltips that stay quiet while the pointer is only passing through. A
* deliberate delay before the first one opens means crossing a toolbarAbout this pattern
Most of the craft in a hover hint is in the timing, not the fade. The pointer has to rest for a beat before the first one opens, which makes skimming a toolbar free; once one has opened the group stays warm for a moment, so moving along the row swaps instantly instead of charging the wait again at every button. Leaving has a short grace so a wobble across a gap does not close anything, and the way out is always quicker than the way in — a hint that lingers after the pointer has gone reads as lag. Keyboard focus opens with no delay at all, since a focused control was chosen deliberately. The panel sits on the CSS system colors, so it is genuinely opaque over content in either theme.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Design canvas
Toolbar hints hold back on a quick pass and then swap instantly along the row.
Related patterns
- Clipboard Toasts StackRepeat copies push a short stack of confirmations that shuffle down and dim instead of piling up.
- Read Receipt TickOne tick becomes two, then the pair tints — sent, delivered, read.
- Save Indicator SettleA turning ring under "Saving" resolves into a drawn tick under "Saved", then the chip recedes.