Skip to content


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 suffix -start or -end.


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 (animateFill: false).


Tooltips can have custom styling. There are a few themes that come with the package available under themes/.


Tooltips can also be triggered by click or focus events.


Tooltips can be interactive, allowing you to hover over and click inside them.

HTML Content

Tooltips can contain HTML.


Tooltips can have different animation durations.


Tooltips can delay hiding or showing after a trigger.

Follow Cursor

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!