Tippy.js – Tooltip and Popover Library

Demo

Tippy.js is a highly customizable tooltip and popover library powered by
Popper.js.

• 🧠

  Smart: optimized positioning engine for flipping and overflow prevention

• ⚡

  Fast: high performance for low-end devices

• 🖱️

  Universal: works with mouse, keyboard, and touch inputs

• ♿

  Accessible: WAI-ARIA compatible

• 🖌

  Themeable: style via custom CSS, includes extra themes and animations

• 🔌

  Pluggable: enhance functionality with plugins

• 🌳

  Tree-shakable: minimize bundle size by importing what you need

• 🧩

  Typed: TypeScript support out of the box

• 🌐

  Supports IE11+: compatible with 99% of desktop and 97% of mobile users

Ready to start? Visit Getting Started, or view a demo of
Tippy’s features below.

The default tippy tooltip looks like this:

It has a background color of #333 and an arrow pointing toward the element,
and is triggered by either mouseenter or focus events so it appears when
hovered, focused via keyboard navigation, or tapped when using a touch device.

With a button element on the document like this:

<
button 
id
=
"
myButton
"
>
My Button
</
button
>

You can initialize it like so:

tippy
(
'
#myButton
'
,
 
{
  content
:
 
"
I'm a Tippy tooltip!
"
}
)
;

Tooltips can be placed in four base ways in relation to the reference element.
Additionally, the tooltip can be shifted along the axis using the suffix
-start or -end.

If a tippy cannot fit within its desired placement, it will flip to the opposite
placement if there is not enough space. In the above examples, flipping has been
disabled to demonstrate each placement properly.

The arrow that points toward the element can have its proportion or shape
modified, or be disabled completely.

Tooltips can have different types of transition animations. By default, it’s a
simple fade (opacity transition).

#Extra included animations

These animations are included in the package and can be imported separately.

#Material filling effect

#Inertia / slingshot elastic effect

Add CSS spring physics to the animation using transition-timing-function.

#CSS keyframe animations

Getting more advanced, you can use actual CSS animations (@keyframes rules),
for example using the animate.css package:

Tooltips can have custom styling.

#Included themes

These themes are included in the package and can be imported separately.

#Custom themes

You can apply any CSS to a tippy via a theme.

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

Use a single tooltip for many different reference elements. This allows you to
“group” tooltips with a shared timer to improve UX when elements near each other
have tooltips with a delay prop.

Non-singleton tippy with delay: 500:

Singleton tippy to group each tippy’s delay: 500:

Singleton tippy with a transition:

A tippy can be nested within another one.

This allows you to create a hover menu system.

Attach many tippies to a single element.

The above is not a complete list of features. There are plenty more!