Skip to content

Addons

Addons are external functions that control or create many different Tippy instances, and can be tree-shaken away by bundlers.

#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
  • Elements with tooltips next to each other that have a delay can be "grouped" so they appear to share a timeout, which greatly improves UX

See the demo for it in action.

#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(...)';
  },
});