Skip to content
Tippy Logo

Tippy.js

View on GitHub
Currently v6.2.6

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

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

© 2020 — MIT License

Icons made by Freepik from www.flaticon.com