Skip to content

Customizing Tooltips

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

tippy('button', {
  animation: 'scale',
  duration: 0,
  arrow: true,
  delay: [1000, 200],

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

  data-tippy-delay="[800, 200]"

Note that only JSON values are valid in attributes.

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

<button data-tippy-content="hello">I have my own content</button>
<button data-tippy-arrow="true">I have my own option</button>
// Global settings for all <button>s
tippy('button', {
  content: 'global content',
  animation: 'fade',

Default options

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

  animation: 'fade',
  arrow: true,

You can place this call directly after the scripts to set the defaults for auto-initialized tooltips:

<!-- script links here -->
    // Your options here