Tippy.js

v6.3.7

Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper.

It provides the logic and optional styling of elements that "pop out" from the flow of the document and float next to a target element.

Smart: will always float optimally in view
Universal: compatible with mouse, keyboard, and touch inputs
Customizable: fine-tunable functionality and fully stylable with CSS
Typed: TypeScript support

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

#Default

The default tippy tooltip looks like this:

It 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!",
});

#Placements

Your tippy can be placed on four different sides in relation to the reference element. Additionally, it can be aligned to the reference element edge, rather than being centered.

tippy(button, {
  // default
  placement: 'top',
});

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.

#Arrows

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

tippy(button, {
  // default
  arrow: true,
});

#Animations

Your tippy can have any type of transition animations. By default, it's a simple fade (opacity transition).

tippy(button, {
  // default
  animation: 'fade',
});

#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:

#Duration

#Themes

Your tippy can have custom styling.

tippy(button, {
  theme: 'light',
});

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

#Triggers

Your tippy can be triggered by a variety of different events, including click, focus, or any other event:

tippy(button, {
  // default
  trigger: 'click',
});

#Interactivity

Your tippy can be interactive, allowing you to hover over and click inside it.

tippy(button, {
  interactive: true,
});

#HTML Content

Your tippy can contain HTML.

tippy(button, {
  content: '<strong>Bolded <span style="color: aqua;">content</span></strong>',
  allowHTML: true,
});

#Delay

Your tippy can delay hiding or showing after a trigger.

tippy(button, {
  delay: 500, // ms
});

#Follow Cursor

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

tippy(button, {
  followCursor: true,
});

#SVGs

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

#Singleton

Use a single tippy 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:

tippy.createSingleton(tippy(buttons), {
  delay: 500,
});

View singletons in detail.

#Nesting

A tippy can be nested within another one.

This allows you to create a hover menu system.

#Plenty more...

The above is not a complete list of features. Tippy is capable of many more things.

Getting Started