Skip to content

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, the instance is directly returned:

const button = document.querySelector('button')
const instance = tippy(button)
// In addition, the instance exists as the `_tippy` property on the element:
button._tippy

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

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