Skip to content
Tippy Logo

Tippy.js

View on GitHub
Currently v6.1.0

Creation

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.

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

Getting StartedCustomization