Tippy.js

Method 1: Auto

Give your reference element(s) a data-tippy attribute containing the tooltip content. Tooltips are automatically created on page load.

<button data-tippy="Tooltip">Text</button>
<button data-tippy="Another Tooltip">Text</button>
<button data-tippy="Hey">Text</button>

If you have dynamically generated elements or are using a framework, use Method 2 and data-tippy-content instead. This is because auto-initialization only happens once upon page load.

Method 2: Function

Use the tippy() function by passing in a CSS selector, and give your reference element(s) a data-tippy-content attribute.

<button data-tippy-content="Tooltip">Text</button>
<button data-tippy-content="Another Tooltip">Text</button>
<button data-tippy-content="Hey">Text</button>

tippy('button')

The tippy function accepts the following types:

• String (CSS selector)
• Element (HTML or SVG)
• Element[] (array of elements)
• NodeList
• Object (virtual element)

⚠️ IE11 requires a classList polyfill if using an SVG element as the reference.

Disabled elements

If an element is disabled, you will need to use a wrapper element (<span> or <div>) in order for the tippy to work. Elements with the disabled attribute aren't interactive, meaning users cannot focus, hover, or click them to trigger a tippy.

<!-- Won't work! -->
<button data-tippy="Tooltip" disabled>Text</button>

<!-- Wrapper <span> will work -->
<span data-tippy="Tooltip">
  <button disabled>Text</button>
</span>

Virtual elements

In some cases you may need to use a virtual element instead of a real DOM element. Pass a plain object with the following properties in:

const virtualElement = {
  getBoundingClientRect() {
    return {
      width: 0,
      height: 0,
      top: 100,
      right: 100,
      bottom: 100,
      left: 100,
    }
  },
  clientWidth: 0,
  clientHeight: 0,
}

tippy(virtualElement)

Change the numbers to suit your needs. Popper.js uses these properties to position the tippy.