Playful Little Tooltip Ideas

Some little ideas for bouncy and playful tooltip shapes and animations with SVG and anime.js. Among other styles, we use shape morphing and transform.

By Manoela Ilic in Playground on
Demo Code

Today we’d like to share a couple of simple tooltip animation ideas with you. The tooltips have different shapes mostly made of SVGs and we are animating them with anime.js. Some of these bouncy fellas use SVG path morphing, others transforms and one is a simple text effect.

Attention: Heavy use of modern CSS properties like CSS grid and flexbox so don’t use a killjoy browser to view the demo.

Have a look at some of the styles:

TooltipAnimations01

TooltipAnimations02

TooltipAnimations03

Tiny break: Want to get website inspiration? Check out our Webzibition and see whats trending.

We hope you enjoy these little ideas and find them inspirational!

References and Credits

Manoela Ilic

Editor-in-Chief at Codrops. Designer, developer, and dreamer — sharing web inspiration with millions since 2009. Bringing together 20+ years of code, creativity, and community.

morphing tooltip

Exploring 3D Effects with 2D Optical Illusions

4 Exclusive Demos: Slideshows & Typographic Animations

On-Scroll Pixelated Image Loading Effect

Browse amazing websites

💎✨ Discover fresh gems in our handpicked exhibition of standout websites that caught our eye.