Tippy.js

Customization

tippy() takes an object of optional props (configuration properties) as a second argument to customize your tippies:

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

These can also be specified on the element using data attributes:

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

Note

Only JSON is valid in attributes.

#Mixing attributes and props

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});