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 in Playground on
TooltipAnimations
View demo Download Source

From our sponsor: Guide customers along the path to purchase with our award-winning platform. Starting at $14.99/mo.

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

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

References and Credits

Find this project on Github

Tagged with:

Mary Lou

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

GooeyMenu_featured

Morphing Gooey Text Hover Effect

ThumbToFull_featured

Thumbnail to Full Width Image Animation

BeAnimations

How to Bring Your Website to Life with UI Animation

Stay up to date with the latest web design and development news and relevant updates from Codrops.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 22

Comments are closed.

  1. Can you show me how to create a plugin for wordpress. I really like these animations but I can’t seem to get them working in my wordpress site.

    Thanks