Skip to content
Tippy Logo

Tippy.js

View on GitHub
Powered by Popper.js

Tippy Instance

The Tippy instance is an individual tooltip object. It has a bunch of properties and methods that contain information and functionality to manipulate the tooltip programmatically.

Accessing an instance

If you pass an element or virtual element to tippy(), the instance is directly returned:

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

If you're passing a CSS selector string, NodeList, or an array of elements, then an array of instances get returned (since potentially many instances can be created):

const instances = tippy('.btn') // Array

_tippy property

Both the reference element and the popper element have the instance attached as the _tippy property.

Reference element:

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

Popper element (parent of tooltip):

const popper = document.querySelector('.tippy-popper')
const instance = popper._tippy

This is especially useful when listening to events on the tooltip and you need to find which reference element it's associated with.

Auto-initialization

If you're using auto-initialization (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
})

Shape and properties

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.
}
All OptionsMethods