Demo

To view examples of Tailtip in action go to Tailtip docs.

Getting started

Tailtip can be included as a plugin into an existing Tailwind CSS project and will allow you to add responsive Tailwind CSS utility classes for animation on scroll.

Installation

Add JavaScript scripts

Add the CDN script or download and paste right before the closing </body> tag

<script src="https://unpkg.com/[email protected]/dist/tailtip.js"></script>

Frequently Asked Questions

Why create Tailtip?

It shouldn't require a large library to create tooltips.

By combining Floating UI and Tailwind CSS, Tailtip allows you to create tooltips with a small bundle size and without the need for additional CSS.

Why not just use CSS?

CSS tooltips are not interactive and have many limitations.

Tailtip uses Floating UI under the hood for positioning and middleware which allows for interactive tooltips that can be triggered on click, hover, focus, etc. It also handles edge cases such as flipping the tooltip when it goes out of the viewport.

Why not use a slider library?

There are many tooltip libraries out there but none of them are built with Tailwind CSS in mind. They include their own way of animating tooltips which adds bloat that Tailwind can handle with its utility classes.

Tailtip allows you to add animations such as opacity with Tailwind CSS utility classes.

Roadmap

• Middleware offset + padding options
• init attr on script tag

Community

If you need help or just want to discuss about the library join the community on Github:

Discuss about Tailtip on GitHub

For casual chatting with others using the library:

Join the Versoly Discord Server