The water button
Buttons, SVG, Physics, Hover
NewFree
All components
The tooltip that rises from the word
A sentence with three words explained, underlined in ink: resting on one, the underline swells round the word, which turns white, and a column of ink rises from it and opens into the tooltip, joined to the word by a soft neck. Going to another word there is no wait: the ink sinks into the first while it rises from the second.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The tooltip that rises from the word</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/source-serif-4@5.3.0/opsz.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the tooltip that rises from the word: a sentence with three words explained. The ink of a word's underline
swells round the word, and the tooltip rises out of it on a liquid neck; going to another word, the ink sinks
back into the first one while it rises from the next. The ink is painted on the svg, the words on top -->
<div class="gloss" data-gloss data-autoclic>
<svg class="gloss__ink gloss__ink--lines" aria-hidden="true" data-lines></svg>
<svg class="gloss__ink" aria-hidden="true" data-ink></svg>
<p class="gloss__text" data-text>
Fix the <button class="term" type="button" aria-describedby="tip-kerning" data-term><span class="term__word">kerning</span><i class="term__base"></i></button>
in titles, open the <button class="term" type="button" aria-describedby="tip-tracking" data-term><span class="term__word">tracking</span><i class="term__base"></i></button>
and catch every <button class="term" type="button" aria-describedby="tip-widow" data-term><span class="term__word">widow</span><i class="term__base"></i></button>
you set.
</p>
<span class="tip" role="tooltip" id="tip-kerning" data-tip>The space between one particular pair of letters.</span>
<span class="tip" role="tooltip" id="tip-tracking" data-tip>Even space added across a whole run of letters.</span>
<span class="tip" role="tooltip" id="tip-widow" data-tip>A paragraph’s last line, alone at the top of a page.</span>
</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.
22 values to change
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 rises from the word” from Animorio and fit it into my siteWhat it does
On a white background a black sentence in a book face, on two lines: Fix the kerning in titles, open the tracking and catch every widow you set. Kerning, tracking and widow are ultramarine blue, underlined by a line of the same blue that draws itself from the left when the page opens, one word after another. Resting the pointer on a word its line gets a little thicker; half a second later the ink climbs from the line and wraps the word in a blue pill, and the letters turn white as the ink covers them. Out of the pill comes a finger of ink with a round tip, rising; then its top spreads into the tooltip with a small bounce, while the neck under it gets thin. In the end the tooltip stays joined to the word by a narrow neck, with soft curves at both ends, like a drop that has not come off; inside, in white, the definition on two lines (The space between one particular pair of letters.). The words on the first line open it above, those on the second below. Moving to another word there is no wait: the old tooltip loses its words, narrows into a column and sinks into its word, which turns blue again, while the new one rises from the new word, and where they meet they are the same ink. Leaving, the tooltip goes back down its neck and the ink drains into the underline. The pointer can go up onto the tooltip without closing it. With the keys, Tab goes from word to word and the tooltip shows at once; Esc puts it away. On a phone a touch on a word opens it, another touch or a touch somewhere else closes it.
How it works
One path per word
Every word has three paths in an svg over the sentence: the underline (in an svg of its own, with no shadow), the ink round the word, and the neck with the tooltip’s body. On every frame the script writes their d attribute again from three springs, ink (the ink round the word), rise (the rise) and wide (the width), worked out on GSAP’s ticker in steps of 4 milliseconds; when the springs are still nothing is drawn again.
Springs in a row
Opening, rise starts when ink is past halfway and wide when rise is past halfway; closing they go the other way round, stiffer and without bouncing, so the body narrows, sinks down the neck and then the ink drains into the line. The rise and the width ride the SPRING spring: held back a little, the body goes a bit past its size and comes back, and is a little squashed while it is wider than it should be.
The neck
The two sides of the neck are cubic curves that leave the body’s edge level and arrive level on the edge of the word’s ink: they blend in with two soft curves and narrow in the middle to NECK pixels, over GAP pixels of length. At first the upper blend and the near corners are at zero, and neck and body are one column 22 pixels wide with a round tip; as wide grows the body spreads, the neck gets thin and the corners round off.
The word that turns white
The word is painted with a gradient cut to its letters (background-clip: text), white up to the height of the ink and blue above it: the stop is a CSS variable the script updates on every frame. The word in use stands over the svg (z-index), the other words of the sentence under it, so the tooltip covers them.
The tooltip’s words
They are real text (role tooltip, and aria-describedby on the word), placed where the body will arrive and as wide as their longest line, measured with a Range. While the body grows, an inset clip-path cuts them to its edges on every frame, so they never stand outside the ink; closing, they go first. The tooltip stays over the sentence, never more than 10 pixels past its sides: if the word is near the edge, the neck stays on the word and the body moves over.
When it shows
The first time after DELAY seconds of the pointer resting; while a tooltip is out, and for GRACE seconds after, the next one rises at once. Leaving the word it waits LINGER seconds, so the pointer can go up onto it. With the keyboard focus it shows at once, and Esc closes it until the pointer or the focus leave the word; a touch opens and closes it. A click from a script (the library’s preview) is a pretend pointer that passes over the three words and then leaves.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
DELAY | script.js | 0.5 | The seconds the pointer rests on a word before the first tooltip. |
GRACE | script.js | 0.6 | The seconds after a tooltip has gone in when the next one rises without waiting. |
SPRING | script.js | [380, 0.52] | The spring the tooltip rises and spreads on: how stiff it is and how much it is held back. |
GAP | script.js | 12 | How long the neck between the word and the tooltip is, in pixels. |
NECK | script.js | 8 | How wide the neck is at its narrowest, in pixels. |
LINGER | script.js | 0.12 | The seconds the tooltip waits after the pointer has left the word, so it can be reached. |
When to use it
For glossaries inside an article, the technical terms of a documentation, the items of a contract or an offer (deductible, APR, SLA), the hard words of a lesson: anywhere a word needs one line of explanation without making the reader leave the text.
On phones
The sentence goes down to 20 pixels and stays on two lines, so the words on the first line open the tooltip above and those on the second below, without covering the other words explained. A touch opens the tooltip, another touch or a touch somewhere else closes it; the tooltip does not stop the finger, which reaches the word under it. It always stays inside the screen.
With reduced motion
No rise, no springs: the ink round the word and the tooltip show already in place with a fade, and in the same time the word goes from blue to white. The underlines are already there, without drawing themselves.
Pitfalls
- The underlines drawn in the same svg as the ink took its shadow too, a grey haze under every word: they sit in an svg of their own, with no filter.
- With the ink up, the underline showed under the pill’s round corners: while the ink is there, the underline is not drawn.
- The first bud was a rectangle on a stalk and looked like a signpost: now the body is born as a column with a round tip, with no upper blend and no near corners, and only by spreading does it become tooltip and neck.
- A wrapped text in a box with max-width is as wide as the maximum, not as its longest line, and the tooltip kept a gap on the right: the script measures the lines with a Range and gives it the right width.
- While the body grew the tooltip’s words stood outside the ink, white on white, and closing a ghost of text stayed on the sinking body: a clip-path cuts them to the body on every frame, and closing they vanish first.
- On a phone a tooltip opened downwards covered another word and stole its touch: pointer-events only inside @media (hover: hover), so the finger goes through it.
- On three lines the words of the middle line opened the tooltip over other text: the sentence is short and balanced (text-wrap: balance) and stays on two lines even at 390 pixels.
- A fade-in of the sentence made a flash: the text showed before GSAP came to hide it. The way in is made only by the underlines, which are not there before the script.
Libraries
GSAP 3.15.0, Source Serif 4 (font variabile) 5.3.0, Instrument Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 8.7 KB; the libraries: GSAP 28 KB.
Testing
Tested on 5 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
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.
