Skip to content
Tippy Logo

Tippy.js

v5.0.3

Demo

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

  • 🍀 Versatile: Create anything from static text tooltips to complex interactive HTML popovers
  • Fast: Optimized positioning engine for flipping and overflow prevention
  • 🖱️ Universal: Compatible with mouse, keyboard, and touch inputs
  • Accessible: Focus and ARIA attributes taken care of by default
  • 🖌 Themeable: Style via custom CSS, includes extra themes and animations
  • 🌳 Tree shakeable: Code is split into separate pieces via addons and plugins
  • 🌐 Supports IE11+: About 99% of desktop users and 97% of mobile users

#Exploring Tippy's features

Given an element on the document...

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

We can give it many different types of tippy tooltips. Let's explore some of them below!

#Default

The default tippy tooltip looks like this: a background color of #333 and an arrow:

Here's how you initialize it:

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

By default, a tippy is triggered by either mouseenter or focus events so they appear when hovered, focused via keyboard navigation, or tapped when using a touch device.

#Placement

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.

tippy('#myButton', {
  placement: 'bottom',
  arrow: false,
});

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

Tooltips can have an arrow that points toward the reference element. The size and proportion can also be modified with CSS. Getting even more advanced, you can use any type of SVG shape as the arrow, like a speech bubble shape.

tippy('#myButton', {
  // Default CSS arrow
  arrow: true,
  // Your own element
  arrow: String | SVGElement,
});

#Animations

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

The CSS transition-timing-function can be modified, by default it's subtle and looks like this:

#CSS keyframe animations

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

#JavaScript spring animations

Animation libraries like animejs can also be integrated.

#Themes

Tooltips can have custom styling.

#Included themes

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

tippy('#myButton', {
  theme: 'light',
});

#Custom themes

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

#Triggers

Tooltips can also be triggered by click or focus events.

tippy('#myButton', {
  trigger: 'click', // or 'focus'
});

#Interactivity

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

tippy('#myButton', {
  content: 'You can select the text inside here.',
  interactive: true,
});

#HTML Content

Tooltips can contain HTML.

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

#Duration

Tooltips can have different animation durations.

tippy('#myButton', {
  // number: show and hide durations are the same
  duration: 0,
  // [number, number]: [show, hide] duration
  duration: [800, 100],
});

#Delay

Tooltips can delay hiding or showing after a trigger.

tippy('#myButton', {
  // number: show and hide delay are the same
  delay: 500,
  // [number, number]: [show, hide] delay
  delay: [500, 0],
});

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

tippy('#myButton', {
  // Follow both x and y axes
  followCursor: true,
  // Follow x-axis
  followCursor: 'horizontal',
  // Follow y-axis
  followCursor: 'vertical',
  // Follow initial cursor without listening
  followCursor: 'initial',
});

#SVGs

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

tippy('line', {
  followCursor: 'initial',
  delay: 200,
});

#Singleton

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:

import {createSingleton} from 'tippy.js';

const instances = [];
const buttons = document.querySelectorAll('button');

for (let i = 0; i < buttons.length; i++) {
  instances.push(
    tippy(buttons[i], {
      content: `Tooltip ${i + 1}`,
      updateDuration: 400,
    }),
  );
}

createSingleton(instances, {delay: [300, 600]});

#Nesting

Tippys can be nested within other ones.

const content = document.createElement('div');

for (let i = 0; i < 3; i++) {
  const button = document.createElement('button');
  button.textContent = 'Text';
  content.appendChild(button);

  tippy(button, {
    content: "I'm a Tippy tooltip!",
    arrow: true,
    animation: 'fade',
  });
}

tippy('#myButton', {
  content,
  arrow: true,
  theme: 'light-border',
});

// Note: Some extra logic is required to handle some other edge cases

#Multiple

Attach many tippys to a single element.

const placements = ['top', 'bottom', 'left', 'right'];

placements
  .reduce(
    (acc, basePlacement) =>
      acc.concat(
        basePlacement,
        `${basePlacement}-start`,
        `${basePlacement}-end`,
      ),
    [],
  )
  .forEach(placement => {
    tippy('#square', {
      content: placement,
      placement,
      multiple: true,
    });
  });

#Miscellaneous


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