Description:
Tippy.js is a small yet highly customizable JavaScript tooltip library that helps you add customizable, interactive, animated tooltips to any DOM elements.
Key features:
- Supports all positions: top, right, bottom, left
- Custom trigger events: mouseenter, focus, click or manual.
- 4 built-in amazing animations: shift, perspective, fade or scale.
- Light & dark themes.
- Allows to embed any html markup inside the tooltip.
- Useful callback functions.
Install it via NPM:
1 | $ npm install tippy |
Basic usage:
Insert the JavaScript and CSS files as displayed below into your html document.1
2<link rel="stylesheet" href="css/tippy.css">
<script src="js/tippy.js"></script>
Add the ‘tippy’ class to your element and define the tooltip content using ‘title’ attribute like this:1
<span class="tippy" title="I'm a tooltip!">Hover Me</span>
Initialize the tooltip library by creating a new Tippy object as this:1
new Tippy('.tippy')
Config the tooltip using the following options. Note that all the options as listed below are allowed to be passed via JavaScript:1
2
3
4
5
6
7
8
9
10
11
12
13
14new Tippy('.tippy', {
html: false,
position: 'top',
animation: 'shift',
animateFill: true,
arrow: false,
delay: 0,
trigger: 'mouseenter focus',
duration: 400,
interactive: false,
theme: 'dark',
offset: 0,
hideOnClick: true
})
Or via HTML ‘data’ attributes:1
2
3
4
5<span class="tippy"
title="I'm a tooltip!"
data-OPTION="VALUE">
Hover Me
</span>
Callback functions available:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19new Tippy('.tippy', {
beforeShown: function() {
// When the tooltip has been triggered and has started to transition in
},
shown: function() {
// When the tooltip has fully transitioned in and is showing
},
beforeHidden: function() {
// When the tooltip has begun to transition out
},
hidden: function() {
// When the tooltip has fully transitioned out and is hidden
}
})
