Skip to content
Tippy Logo

Tippy.js

v5.0.3

Addons

Addons are external functionality added to Tippy.js that don't need to belong in the core library. This means users who don't need this functionality aren't burdened with extra download size. By default, two useful addons are included.

#Event delegation

Event delegation allows you to let a common parent element handle the creation of tippy instances for child elements.

This allows two things:

  • It prevents the need to create new instances for new child elements appended to the parent.
  • It improves performance as the creation of the tippy instances is deferred until they are triggered for the first time.

#Usage

Your markup should have a structure like this example:

<div class="parent">
  <button class="child">Text</button>
  <button class="child">Text</button>
  <button class="child">Text</button>
</div>

Pass a targets argument to the delegate() addon function (the same type the tippy() function can accept) which represents the parent element(s) that should act as a delegate, and a target prop representing a CSS selector that should match the child elements which should receive a tippy.

import {delegate} from 'tippy.js';

delegate('#parent', {
  target: '.child',
});

In the CDN (IIFE) version, it's available as tippy.delegate()

#Return type

Because delegate() can create many different instances, it returns an opaque value depending on the type supplied, just like tippy().

const delegateInstances = delegate('.parent', {
  target: '.child',
}); // Instance[]

const delegateInstance = delegate(parentElement, {
  target: '.child',
}); // Instance

#Cleanup

By default, when you destroy a delegate instance, it also destroys any child instances that may have been created by it. If you want to prevent this behavior, pass false as an argument:

const delegateInstance = delegate(parentElement, {
  target: '.child',
});

// Prevents further creation and destroys any created child tippy instances
delegateInstance.destroy();
// Prevents further creation only
delegateInstance.destroy(false);

#Polyfill

This addon uses Element.prototype.closest(), which is not supported in older browsers. You will need to polyfill this method to get full support.

#Singleton

A singleton is a single tippy element that takes the place of an array of regular tippy instances.

This allows two things:

  • Smooth transitions of the tippy between many different reference element targets
  • Instances with a delay can be "grouped" such that appear to share a timeout, which greatly improves the UX for elements near each other when their tooltips have a delay

#Usage

Pass an array of tippy instances to the createSingleton addon function, and a delay prop:

import tippy, {createSingleton} from 'tippy.js';

const tippyInstances = tippy('button');
const singleton = createSingleton(tippyInstances, {delay: 1000});

In the CDN (IIFE) version, it's available as tippy.createSingleton()

#Smooth transitions

Utilize the updateDuration prop, which is the transition duration between position updates of the tippy element:

const singleton = createSingleton(tippyInstances, {
  delay: 1000,
  updateDuration: 500,
});

The transition-timing-function by default is easeOutQuint. Usually this looks nice, but you can change this (to add an inertial slingshot effect for example) like so:

const singleton = createSingleton(tippyInstances, {
  updateDuration: 500,
  onCreate({popper}) {
    // Any easing function you want.
    popper.style.transitionTimingFunction = 'cubic-bezier(...)';
  },
});