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

#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'));

#Client-rendered elements

Every time you create a new element with JavaScript, you should pass it to tippy() in order to apply a tooltip to it.

const strong = document.createElement('strong');
strong.textContent = 'reference';
document.body.appendChild(strong);

// `content` is the JavaScript form of the `data-tippy-content` HTML attribute
tippy(strong, {content: 'tooltip'});

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