Morphing Popover Tooltip
One floating bubble serves every target: position, width, height and arrow all tween, so the tooltip travels between targets instead of blinking out and back.
About This Component
A tooltip layer built from a single bubble. The first hover fades one in after a short delay, and every hover after that moves the same element: its x, y, width and height all tween together while the arrow slides along the edge and keeps pointing at the target. Moving down a column of targets reads as one object travelling, which is what separates it from a stack of tooltips appearing and disappearing.
Read the full effect overview
A single self-contained component: one HTML file, one stylesheet, one script, vanilla JavaScript and core GSAP, no framework and no plugins. Ships in three looks, vault, paper and glass, switched with one data-variant attribute.
What's Included
- One bubble for every target, morphing position and size between them
- Arrow tracks the target centre and clamps to the bubble's edge on long labels
- Flips to the opposite side when the preferred side runs out of viewport
- A delay before the first show, then instant morphing while the bubble is up
- An offscreen twin measures the next box, so the size tween never guesses
- Keyboard focus shows the tooltip exactly as hover does, Escape dismisses it
- Native title attributes are the no-JS fallback, stripped once the script runs
- Three shipped variants: vault, paper, glass
Perfect For
- Dense settings and billing panels where every field needs a note
- Toolbars and icon rails with no room for labels
- Documentation and pricing pages explaining inline terms
- Dashboards where several tooltips sit close enough to be read in sequence
How It Works
Measure, then morph
An offscreen twin of the bubble carries the same padding, font and max-width. Setting the next label on it gives the exact box the bubble is about to occupy, so a single gsap.to can tween x, y, width and height together on a power3.out ease instead of snapping the size and hoping the text fits.
Arrow and flipping
The arrow is a sibling of the bubble rather than a child, because the bubble clips its own overflow while its box tweens. Its position is solved in viewport coordinates from the target's centre and clamped to stay on the bubble's edge, and the same solve step flips the placement to the opposite side whenever the preferred side would cross the viewport margin.
Delay and warmth
The first hover waits out a short delay so a cursor crossing the page does not fire tooltips. Once one is up, and for a moment after it hides, the layer stays warm and every further hover paints immediately, which is what makes a run of targets read as one bubble travelling.