The tooltip that follows

Tooltips, Hover, PhysicsGSAPMediumCompressed weight: Demo 5.8 KBGSAP 28 KBFreeDownload the zip

A toolbar with one tooltip only: going from one button to another it does not vanish and come back, it glides to the new button on a spring, stretching the way it goes, while it changes its width for the new words and its tail already points at the button it is going to.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The tooltip that follows</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/work-sans@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage">
    <!-- the tooltip that follows: a toolbar with one tooltip only, which glides from button to button on a spring,
         stretching as it goes and changing its width to fit the new words -->
    <div class="bar" data-bar data-autoclic>
      <div class="bar__tools" role="toolbar" aria-label="Formatting" data-tools></div>
      <div class="tip" aria-hidden="true" data-tip>
        <div class="tip__in" data-tip-in>
          <span class="tip__body" data-tip-body></span>
          <span class="tip__tail" data-tip-tail></span>
        </div>
      </div>
    </div>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

12 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The tooltip that follows” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a white background a white floating toolbar with buttons drawn in line: bold, italic, underline, link, list, image, undo and redo, split by thin lines. Resting the pointer on a button, a moment later a dark tooltip rises over it with the name and the keys (Bold, Cmd B, or Ctrl on Windows); moving along the toolbar, the tooltip glides to the new button on a spring, stretching a little the way it goes and getting thinner, it changes its width to fit the new words, the old ones leave one way and the new ones come in from the other, and the tail already points at the button it is going to. Leaving the toolbar it fades; coming back soon after, it shows without waiting. Bold, italic and underline stay pressed in lilac when clicked, with a small hop of their drawing.

How it works

One tooltip only

It is a single element for all the buttons: the script puts it over the middle of the button (offsetLeft plus half the width), in the toolbar’s coordinates, and keeps it inside the screen; GSAP gives it x and y on every frame.

The spring and the stretch

Its place follows the button chosen on a spring (SPRING), worked out on GSAP’s ticker in steps of 4 milliseconds; the spring’s speed stretches the body (scaleX 1 + speed × STRETCH, up to 1.2, and a little thinner). The tail sits on the button it is going to, so it points there before the tooltip arrives.

New words

The words are a span placed in the middle of the body (xPercent −50): the old one leaves 18 pixels the other way and fades in 0.11 seconds, the new one comes in from 18 pixels on the side the tooltip comes from; the body’s width goes to the new words’ width in 0.32 seconds.

When it shows

The first time it waits DELAY seconds of the pointer on a button, then rises (scale from 0.86, from 6 pixels lower, back.out); leaving the toolbar it fades, and for GRACE seconds a new button shows it at once. With the keys the arrows move along the toolbar (a single stop with Tab), the tooltip follows the focus at once and Esc hides it; on a phone a long press shows it and the finger can slide along the buttons.

What screen readers hear

The tooltip only repeats what the buttons say: each has aria-label and aria-keyshortcuts, and those that stay pressed aria-pressed; the tooltip is aria-hidden. A click from a script (the library’s preview) is a pretend pointer: it rests on a button, moves along the toolbar pressing one now and then, and leaves.

Values to change

Name	File	Default	What it changes
`DELAY`	script.js	`0.45`	The seconds the pointer rests on a button before the first tooltip.
`SPRING`	script.js	`[320, 0.72]`	The tooltip’s spring as it glides: how stiff it is and how much it is held back.
`STRETCH`	script.js	`0.00012`	How much it stretches with its speed.
`GRACE`	script.js	`0.6`	The seconds after leaving the toolbar in which it comes back at once.

Try them in the Playground

When to use it

For the toolbars of an editor, the icons of a dashboard, the controls of a video player, a bar made of icons only: anywhere a button has only a drawing and a name to tell.

On phones

The buttons go down to 36 pixels so the toolbar fits the screen; a long press shows the tooltip without pressing the button and the finger can slide along the toolbar; the tooltip always stays inside the screen.

With reduced motion

The tooltip jumps from one button to another without spring or stretch, shows and hides at once, without rising, and the words change straight away.

Pitfalls

One tooltip per button, hiding and showing again at every pass, flickers: a single one that moves stays readable, and the tail already pointing at the button it is going to tells where it goes.
Two words crossing in the same box are read together: the old one is nearly gone (0.11 seconds) before the new one shows.
The Cmd or Ctrl key depends on the system: here it is read from navigator.platform, and written in words, without special symbols.
On a phone a long press opens the system’s menu: -webkit-touch-callout none on the buttons and the contextmenu stopped.

Libraries

GSAP 3.15.0, Work Sans (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 5.8 KB; the libraries: GSAP 28 KB.

Testing

Tested on 3 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: Done

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.