Objects

When working with Tippy.js, there are two types of objects to think about: collections and instances.

Collections

When you call the tippy() function, you are potentially creating many tippys at once. For example, suppose you want to give tooltips to all buttons:

<main>
  <button>Text</button>
  <button>Text</button>
</main>
const collection = tippy('button', { content: 'Tooltip' })

It creates tooltips for both <button> elements. There may be many of these on the page.

collection is a plain object with these properties:

{
  targets: 'button', // First argument: which elements received tippys
  props: { ... }, // Default props + options merged together
  instances: [...], // All the individual instances created (see next section)
  destroyAll() { ... }, // Method to destroy all the tippys that were created
}

Instances

Instances refer to individual Tippy objects. There are two ways to access an instance:

Return value from tippy.one() static method

This method only creates a single tooltip, so it will apply it to the first element.

const instance = tippy.one('button')

The _tippy property on an element

const button = document.querySelector('button')
tippy(button)
const instance = button._tippy

Auto-initialization

If you're using the Auto Method (data-tippy attribute), and you need to access the instance immediately at runtime, make sure you wrap access in setTimeout():

setTimeout(() => {
  const button = document.querySelector('button')
  const instance = button._tippy
})

instance is a plain object with these properties:

{
  id: 1, // 1 to Infinity, used for `aria-describedby` attribute
  reference: HTMLButtonElement, // <button>
  popper: HTMLDivElement, // <div class="tippy-popper">...</div>
  popperChildren: { // Child elements of the parent popper element
    tooltip: HTMLDivElement, // <div class="tippy-tooltip">...</div>
    content: HTMLDivElement, // <div class="tippy-content">...</div>
    arrow: null | HTMLDivElement, // <div class="tippy-arrow"></div>
    backdrop: null | HTMLDivElement, // <div class="tippy-backdrop"></div>
  },
  popperInstance: null, // Instance is lazily created
  props: { ... }, // Instance props + attribute options merged together
  state: {
    isDestroyed: false, // Has the instance been destroyed?
    isEnabled: true, // Is the tippy enabled (can show or hide)?
    isVisible: false, // Is the tippy currently showing (and not transitioning out)?
    isMounted: false, // Is the tippy currently mounted to the DOM?
    isShown: false, // Is the tippy fully shown after finishing transitioning in?
  },
  // This object also contains methods. You'll learn in the next section.
}