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('button');

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',
});

#Content types

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

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

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

If you intend to allow HTML inside the tooltip that contains user data, you must use a sanitization library like DOMPurify to prevent XSS:

tippy('#singleElement', {
  content: DOMPurify.sanitize(unsafeUserData),
});

#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;
}