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.

Code on Github
🧑‍💻 🎥
... 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.

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!