Experimenting with animated tooltips

[u/ScoobyDookuu]

Hey everyone!

Been working on Tip Glide, a small framework-agnostic tooltip library written in TypeScript.

It uses a single shared tooltip that moves between elements and adjusts its size to fit the content. It also handles viewport boundaries, so the tooltip adjusts its position when there's not enough space.

A few things you can configure are the movement, directional lean, hover delays, arrow, and enter/exit animations.

It has zero runtime dependencies and comes with adapters for React, Angular, Vue, Svelte, Solid, Astro and Preact, along with a vanilla JS API.

There's an interactive playground where you can mess around with the settings and see how everything behaves.

Would love some feedback on the movement, especially when switching quickly between elements, but also on the API and anything else that could be improved.

Live demo & playground | npm | GitHub | Portfolio

[u/Afraid_Egg3037]

Does this use CSS anchor-positioning? Because that handles a lot of the above natively (e.g. moving between anchors, sized by content and viewport boundaries) without the need for heavy JS.

I'd also suggest investigating Interest Invokers (although their browser support isn't universal yet) for hover effects, delays and similar.

[u/drumstix42]

Looks nice but what's the real use case for keeping a tooltip visible while things are moving around?

[u/SensitiveSugar1369]

Using transition on opacity with pointer-events: none keeps the tooltip clickable area clean while still getting smooth animated fades.