To view examples of Tailtip in action go to Tailtip docs.
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.
Add the CDN script or download and paste right before the closing </body> tag
<script src="https://unpkg.com/tailtip@1.0.3/dist/tailtip.js"></script>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.
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.
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.
- Middleware offset + padding options
- init attr on script tag
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: