A tooltip animation that's so simple, but SO satisfying
In this video we'll be recreating an amazing tooltip animation that was created by one of the engineers of Linear.
... Almost ready!
The Linear team did it again! Below you see a tweet by one of the co-founders of Linear, showing an amazing tooltip design created by one of their engineers. It just looks awesome! And exactly that is what we’ll be going to recreate in this video.
Our resident FE magician @paul_dijou created this absolutely gorgeous animating tooltip for our insights graphs. So good. And nostalgic. Takes me back to my Flash days 🥹. pic.twitter.com/9wwK0uPRnt
— Tuomas Artman (@artman) May 16, 2023
For recreating this tooltip I’ve decided to not use any animation library like Framer Motion, but this time stick with our good friend plain CSS, and a sprinkle of JavaScript on top of it.
We’ll be animating the active tooltip item into view by making use of the scrollIntoView API. This API is
perfect for helping us with animating an element into view. Most of the time you’ll probably use this for
scrolling the whole website – but today I’ll show you that you can do way more with this API!
Building the chart and tooltip itself
We’ll also be focussing on adding the chart and styling the tooltip itself. We won’t be diving into chart libraries though, since this video is not about charts at all. Use the video timestamps if you immediately want to skip to the part where we’ll be adding the animations!