Tippy.js

Creating Tooltips

Give elements you would like to give tooltips to a data-tippy-content attribute:

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

To give them a tippy tooltip, call the tippy() function with a CSS selector matching these elements:

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

The data-tippy-content attribute allows you to give different tooltip content to many different elements, while only needing to initialize once.

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

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

Tippy will create tooltips for elements even if you forget to give them content, which creates an odd shape with no content, so ensure your CSS selector is specific enough to guarantee their content.

#Content types

Plain text and HTML (string or element) are allowed.

If you're passing unknown user data to content, disable HTML for safety, unless explicitly sanitizing it:

tippy('#singleElement', {
  content: unsafeUserData,
  allowHTML: false,
});

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

#SVG in IE11

If you need to support SVG elements in IE11, you will need to include a polyfill for SVGElement.prototype.contains.

The polyfill is small:

if (!SVGElement.prototype.contains) {
  SVGElement.prototype.contains = HTMLDivElement.prototype.contains;
}