Morphing Tooltip
One dark tooltip that pulls up out of the toolbar button you hover, slides between neighbours while it resizes to each caption, and sinks back into the button when you leave.
One of 90 GSAP components in React, Vue and HTML.
On mobile
Take the free components with you.
In React, Vue and HTML, in your inbox, ready when you're back at your desk.
How it's built.
There is only ever one tooltip. It is born out of the button you hover, and when you move to the next button the same one travels over and resizes to the new caption instead of one fading out while another fades in. The first version faded per button and it felt like five separate tooltips flickering at you, which is exactly what a toolbar does not need.
The join between button and tooltip is a real liquid merge, not a drawn arrow. Underneath sits a second copy of each shape, hidden exactly behind the real one, and a filter turns two copies into one body wherever they touch. Pulling apart is the good half: the connection stretches, thins and breaks, and you can see the break. Merging has no break to see, so the tooltip is born deep inside the button and the spring carries it out through the edge.
Past that it's yours. Use your own buttons and captions, set how fast the tooltip travels between them, how long it waits before it leaves, how thick the goo is and which side the tooltip sits on. The caption keeps the width it will end up at, so it never re-wraps while the surface is still growing.
What you'll need.
Install
- GSAP
- CustomEase
Attributes, tips, use cases and full code are part of access.
The preview and provenance stay public. Tune-it docs, the data-anm-* attribute table, real-world use cases and the copy-ready code unlock the moment you sign in.
Frequently asked
- Does Morphing Tooltip work with React and Vue?
- Morphing Tooltip ships as React (Next.js included), Vue 3 (Nuxt included), plain HTML/CSS/JS - the same animation in each format. The React version uses the official useGSAP hook with cleanup handled; the Vue version is a real single-file component with <script setup>.
- Do I need GSAP to use Morphing Tooltip?
- Yes. Morphing Tooltip is built on GSAP directly, and GSAP has been 100% free for commercial use, including every plugin, since version 3.13. The component page lists exactly what to install.
- Can I customize Morphing Tooltip without editing code?
- Morphing Tooltip exposes 7 tunable controls in the Customize panel on this page - drag the values, watch the live preview respond, and the code you copy carries your exact settings.
- Is Morphing Tooltip free?
- Morphing Tooltip is part of the Annnimate Library, a paid subscription (from EUR 20/month billed quarterly, or EUR 199/year). The live preview and customization run free on this page; the paste-ready code is for members.
- What if Morphing Tooltip is not right for my project?
- Annnimate comes with a 14-day money-back guarantee. If Morphing Tooltip or the library does not fit your project, reply to your receipt within 14 days for a full refund, no questions asked.
- Can I use Morphing Tooltip in client projects?
- Yes. The Annnimate license covers commercial and client work - ship Morphing Tooltip on as many projects as you build, with no attribution required.
- Does Morphing Tooltip respect prefers-reduced-motion?
- Yes. Every Annnimate component handles prefers-reduced-motion via gsap.matchMedia, so users who opt out of motion get an effectively instant, readable state.
