Skip to content

Demo

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.

Default

The default tooltip looks like this when given no options. It has a nifty background fill animation!

Placement

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.

Arrows

Tooltips can have an arrow that points toward the reference element. The size and proportion can also be modified with CSS.

Animations

Tooltips can have different types of transition animations. Note, the filling effect has been disabled in these examples (animateFill: false).

Themes

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

Triggers

Tooltips can also be triggered by click or focus events.

Interactivity

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

HTML Content

Tooltips can contain HTML.

Duration

Tooltips can have different animation durations.

Delay

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).

SVGs

Tooltips can be placed on SVG nodes, where followCursor: 'initial' becomes very useful, since it can be placed directly on the line.

Nesting

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!