Dependency
This module requires the Tippy.js library.
Install Tippy.js
npm install tippy.js
Basic usage
Add the attribute
data-anim-tippy-content
to any element and define the tooltip text.
Tooltip example
<button
data-anim-tippy-content="Tooltip text"
>
Hover me
</button>
Example usage
Tooltip on component card
<div
class="component-card__type-value"
data-anim-tippy-content="Only for PRO members"
>
PRO
</div>
Device behavior
- Desktop — tooltip opens on mouse hover and focus
- Mobile — tooltip opens on click
Automatic device detection
The module automatically detects touch devices
and switches the tooltip trigger to click.
Features
- Auto mobile detection
- Click tooltips on touch devices
- Hover tooltips on desktop
- Only one tooltip open at a time
- Interactive tooltips
- Smooth fade animation
Download
Add elegant tooltips to your UI with just one attribute. Tippy integrates perfectly with the Animmaster component system and provides smooth, accessible tooltips.