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