Skip to content

FAQ

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. 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: 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 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/dist/umd/popper.min.js"></script>
    <script src="https://unpkg.com/tippy.js@4"></script>
    <script>
      tippy('button')
    </script>
  </body>
</html>

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)

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.