Skip to content
Tippy Logo




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!


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.


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.


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,


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.


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.


Tooltips can also be triggered by click or focus events.

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


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>',


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],


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',


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,


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++) {
    tippy(buttons[i], {
      content: `Tooltip ${i + 1}`,
      updateDuration: 400,

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


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';

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

tippy('#myButton', {
  arrow: true,
  theme: 'light-border',

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


Attach many tippys to a single element.

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

    (acc, basePlacement) =>
  .forEach(placement => {
    tippy('#square', {
      content: placement,
      multiple: true,


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