Skip to content
Tippy Logo

Tippy.js

View on GitHub
Currently v6.2.4

HTML Content

The content prop can accept a string, element, or function.

To interact with the content inside the tippy, set interactive: true.

#String

tippy('button', { content: '<strong>Bolded content</strong>', allowHTML: true, });

Note

Ensure HTML strings containing user data are sanitized properly to prevent XSS attacks.

#Element.innerHTML

You can pass in an element's .innerHTML string:

<div id="template" style="display: none;"> <strong>Bolded content</strong> </div>
const template = document.getElementById('template'); tippy('button', { content: template.innerHTML, allowHTML: true, });

#Element

You can pass the element itself, which is useful for keeping event listeners attached (or when a framework is controlling elements inside):

const template = document.getElementById('example'); template.style.display = 'block'; tippy(singleButton, { content: template, });

This differs from passing a string in that a single element can only exist in a single tippy. The template will be moved from the document and into the tippy itself.

#Template linking

If you have multiple references each with their own unique template, there is a way to link them with their associated template:

<button data-template="one">One</button> <button data-template="two">Two</button> <button data-template="three">Three</button> <div style="display: none;"> <div id="one"> <strong>Content for `one`</strong> </div> <div id="two"> <strong>Content for `two`</strong> </div> <div id="three"> <strong>Content for `three`</strong> </div> </div>

We can make content a function that receives the reference element (button in this case) and returns template content:

tippy('button', { content(reference) { const id = reference.getAttribute('data-template'); const template = document.getElementById(id); return template.innerHTML; }, allowHTML: true, });
All PropsThemes

© 2020 — MIT License

Icons made by Freepik from www.flaticon.com