Tippy.js

Customizing Tooltips

As seen in the demo, the tippy() function takes an object of optional props as a second argument to customize the tooltips being created:

tippy('button', {
  duration: 0,
  arrow: false,
  delay: [1000, 200],
});

You can also specify props on the element using data attributes:

<button
  data-tippy-duration="0"
  data-tippy-arrow="false"
  data-tippy-delay="[1000, 200]"
>
  Text
</button>

Note that only JSON values are valid in attributes.

It can be useful to use the function for "global" config and choose attributes for individual config here and there:

<button>Default</button>
<button data-tippy-content="hello">I have my own content</button>
<button data-tippy-arrow="true">I have my own option</button>

// Global config for all <button>s
tippy('button', {
  content: 'Global content',
  trigger: 'click',
});

#Default props

Often you don't want to specify props over and over again when initializing tooltips. You can set the default props for every new tippy instance with the tippy.setDefaultProps() method:

tippy.setDefaultProps({delay: 50});