Tippy.js

HTML Content

Tippy isn't just limited to simple text tooltips. Rich HTML content can be displayed within the tippy, and users can interact with content inside.

Note that if you want to be able to interact with the content inside the tippy, you'll need to set interactive: true.

String

A string of HTML can be used:

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

Element

`<template>` element

The content within a <template> is "inert" and doesn't get rendered on the page. This makes it ideal for creating reusable pieces of content:

<template id="example">
  <strong>Bolded content</strong>
</template>

const template = document.getElementById('example')
const container = document.createElement('div')
container.appendChild(document.importNode(template.content, true))

tippy('button', {
  content: container.innerHTML,
})

⚠️ Note that IE11 does not support the <template> element, see the polyfill.

Standard `<div>`

It's also possible to use a <div> (or any other element) instead:

<div id="example" style="display: none;">
  <strong>Bolded content</strong>
</div>

const template = document.getElementById('example')
tippy('button', {
  content: template.innerHTML,
})

Content within the <div> gets rendered and displayed on the page, so we need to hide it using display: none.

Keep event listeners attached

If you want to keep event listeners attached to the element, you can pass the element itself (<div> element):

const template = document.getElementById('example')
template.style.display = 'block'

tippy('button', {
  content: template,
})

Once Tippy has appended the template to the tooltip, we need to unhide it, which we can do by setting its display property to block.

Tippy will move the template from the document into the tooltip. Note that this is a one-time operation. It can only exist in a single tippy since it's not being cloned.

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>

<template id="one">
  <strong>Content for `one`</strong>
</template>
<template id="two">
  <strong>Content for `two`</strong>
</template>
<template id="three">
  <strong>Content for `three`</strong>
</template>

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 container = document.createElement('div')
    const linkedTemplate = document.getElementById(id)
    const node = document.importNode(linkedTemplate.content, true)
    container.appendChild(node)
    return container
  },
})

Methods Themes