Does this replace the live Tooltip page?

No. When to use one, naming, delay, Escape, and tooltip versus popover all live there. This page is the fade.

The label is already late. A slide makes it later and louder. Fade.

How long should it take?

80 to 150 milliseconds. The live page 120 is a good default.

There is no hover. Do not invent a long-press tooltip for information people need. Put the words on the page.

Should reduced motion hide the tooltip?

No. Show the label. Skip the tween.

Tooltip

A tooltip is a short, non-interactive label that appears when someone hovers or focuses a control. The motion is a fade. Anything louder starts to look like the point.

Buttons and controlsBuild difficulty: EasyautoAlpha

Also called Hint, Info bubble, Hover label, Hover tip.

Here it is working.

Hover Save. The hint sits above it, then goes.

For designers

The live Tooltip page owns the real decisions: when this should have been a popover, how to name an icon-only button, delay, Escape, and why hover-only fails. This page is the movement, which should be the least interesting part. A 120 millisecond fade is plenty. Slides, bounces and scales point at a box whose job is to stay out of the way. Show it on hover after a short delay, and on keyboard focus with no delay. Hide it at once on leave, blur, Escape or scroll. Touch has no hover, so if the words matter on a phone, put them on the page.

Use this when

An icon-only button needs a name, and the live Tooltip rules already fit.
You can keep the motion to a fade, under about 150 milliseconds.
Focus shows the same label as hover, with no extra wait.
Reduced motion can show the label at once.

Reach for something else when

The content is needed to finish the task. Put a visible hint on the page.
Someone has to click inside it. That is a popover, and it needs different motion.
The trigger has no name in code. Start with Icon button. See the Button page.
The live questions are still open. Start with the Tooltip page.

How to build it

Build the tooltip the live page describes: a focusable trigger, a role of tooltip, and a name hook that matches the case. Icon-only uses the tooltip as the name. A labelled button uses it as extra detail. Motion is opacity, maybe a 4 pixel rise. 80 to 150 milliseconds in, instant out. Delay the hover open by 300 to 500 milliseconds. Skip that delay once one tooltip in a group has opened. On reduced motion, show and hide with no tween. Ignore hover on touch.

Official GSAP

gsap.to autoAlpha + y.

gsap.set(tip, { autoAlpha: 0, y: 6 });
gsap.to(tip, { autoAlpha: 1, y: 0, duration: 0.25 });

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Does this replace the live Tooltip page?: No. When to use one, naming, delay, Escape, and tooltip versus popover all live there. This page is the fade.
Why not slide it in?: The label is already late. A slide makes it later and louder. Fade.
How long should it take?: 80 to 150 milliseconds. The live page 120 is a good default.
What about mobile?: There is no hover. Do not invent a long-press tooltip for information people need. Put the words on the page.
Should reduced motion hide the tooltip?: No. Show the label. Skip the tween.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Accordion