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 stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.

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

References and Credits

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Trigonometry in CSS and JavaScript: Getting Creative with Trigonometric Functions

How to Create a Cover Page Transition

Large Image to Content Page Transition

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 22

Comments are closed.

  4. So great and fluid : thanks !!

    But could someone give me some advice to include this effects into a page in WordPress ? CSS and js files are well loaded, but the effect (on hover) doesn’t work… Thanks again

    • Hi,
      i want to include this effect into a wordpress theme too… it doesn’t work…

  10. By killjoy you mean IE….Don’t mince words, we all know what you meant 🙂

  11. Thanks for this post.Easy way is given to understand code.Nice code really work.

  12. These are so cool and creative. One of my favorites and can totally see these being practical in some designs.

  13. This is really awesome. I love the ‘Cora’- tag ” Be yourself; everyone else is already taken.” Just nice one …..

  14. You’re great, you have perfect skills.

    May be you can create a program for create animated elements / boxes, in the future. Lead us.

  21. 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