Tippy.js is a highly customizable tooltip and popover library powered by Popper.js. It's compatible with IE11+, about 99% of desktop users and 96% of mobile users. It can be used to create simple static text tooltips, or complex HTML popovers that utilize AJAX.
The default tooltip looks like this when given no options. It has a nifty background fill animation!
Tooltips can be placed in four different ways in relation to the reference
element. Additionally, the tooltip can be shifted along the axis using the
Tooltips can have an arrow that points toward the reference element. The size and proportion can also be modified with CSS.
Tooltips can have different types of transition animations. Note, the filling
effect has been disabled in these examples (
Tooltips can have custom styling. There are a few themes that come with the
package available under
Tooltips can also be triggered by
Tooltips can be interactive, allowing you to hover over and click inside them.
Tooltips can contain HTML.
Tooltips can have different animation durations.
Tooltips can delay hiding or showing after a trigger.
Tooltips can follow the mouse cursor and abide by a certain axis. Additionally, the tooltip can follow the cursor until it shows, at which point it will stop following (initial).
Tooltips can be placed on SVG nodes, where
followCursor: 'initial' becomes
very useful, since it can be placed directly on the line.
Tooltips can even be nested. You can have fun with the following little example :-)
The above is not a complete list of features. There are plenty more!