Tippy.js

FAQ

What syntax theme is used on this website?

It's a theme I made called Moonlight!

Why is there a blue outline around my element?

You may notice a blue outline around your reference element. The blue outline is called a focus ring; it lets keyboard users know which element on the page is currently in focus. Most natively focusable elements have this ring by default, but Tippy adds an attribute to the element so that it can receive focus if it natively cannot, so that keyboard users (e.g. blind users) can access the tooltip without using a mouse.

Recommended: only apply the tooltip to natively focusable elements like <button> or <input>, otherwise use the focus-visible polyfill: https://github.com/WICG/focus-visible. This will remove the outline for mouse users but keep it visible for keyboard users.

If your tooltip is non-essential (only acts as enhancement), then you can disable the a11y option:

tippy('div', {
  a11y: false,
})

I can't click things inside the tooltip

To enable interactivity, set the interactive option to true.

My tooltip is hiding instantly after showing

If you're using a focus trigger, for example on an <input>, make sure you also set hideOnClick: false.

My tooltip is not working using `data-tippy`

Make sure Tippy's scripts are placed before your own scripts, at the very bottom of the page, like so:

<!DOCTYPE html>
<html>
  <head>
    <title>My page</title>
  </head>
  <body>
    <button data-tippy="Created automatically">Text</button>
    <button data-tippy-content="Created by function">Text</button>

    <!-- Very end of the body -->
    <script src="https://unpkg.com/popper.js@1"></script>
    <script src="https://unpkg.com/tippy.js@4"></script>
    <script>
      tippy('button')
    </script>
  </body>
</html>

Changing data-tippy-* attributes does not update the tooltip

Updating the data-tippy-* attribute on an element will currently not update the tooltip. You must use the set() method on a Tippy instance.

For example, let's say you want to update the theme for tooltips when changing between dark and light mode:

const instances = tippy('.example', {
  theme: 'custom-dark',
})

// When clicking the theme toggle button, you can do this:
const newTheme = 'whatever'
instances.forEach(instance => {
  instance.set({ theme: newTheme })
})

It's also possible to attach a MutationObserver to the reference elements and observe mutations to attributes if need be, then call .set() with the new values.

Can I use the `title` attribute?

Yes. The content option can be a function that receives the reference element as an argument and returns a string or element.

tippy('button', {
  content(reference) {
    const title = reference.getAttribute('title')
    reference.removeAttribute('title')
    return title
  },
})

The title attribute should be removed once you have its content so the browser's default tooltip isn't displayed along with the tippy.

With the beauty of higher-order functions, you can "enhance" the base tippy function with new functionality. To add this behavior by default, you can do something like this at the very top of your scripts before any calls to tippy():

function withTitleAttributeContent(tippy) {
  return (targets, options = {}) => {
    return tippy(targets, {
      ...options,
      content(reference) {
        if (options.content) {
          return options.content
        }
        const title = reference.getAttribute('title')
        reference.removeAttribute('title')
        return title
      },
    })
  }
}

window.tippy = withTitleAttributeContent(tippy)

Misc Motivation

FAQ