Tippy.js

Constructor

The tippy() constructor (a plain function) creates individual tippy instances. To give the tippy content you have two options:

#Attribute

With some elements on the document:

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

Call the tippy() constructor with a CSS selector matching them:

tippy('[data-tippy-content]');

#Prop

If targeting a single element, you can use the content prop instead of the attribute:

tippy('#singleElement', {
  content: 'Tooltip',
});

Note

Tippy will create tooltips for elements even if you forget to give them content, resulting in an odd small shaped tooltip. Ensure your CSS selector is specific enough to guarantee their content.

#Target types

The first argument you pass to tippy() is the targets you want to give tooltips to. This can represent one or many different elements.

// String (CSS selector matching elements on the document)
tippy('#id');
tippy('.class');
tippy('[data-tippy-content]');

// Element
tippy(document.getElementById('my-element'));

// Element[]
tippy([element1, element2, element3]);

// NodeList
tippy(document.querySelectorAll('.my-elements'));

#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-content="Tooltip" disabled>Text</button>

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

Please note that this has accessibility concerns and should be avoided if possible.