Methods

Methods on instances allow you to control the tippy programmatically. See the Objects section for how to access a Tippy instance.

Show the tippy

Programmatically show the tippy at any time.

instance.show()

Hide the tippy

Programmatically hide the tippy at any time.

instance.hide()

For both the show() and hide() methods, you can pass a number in as an argument to use as the animation duration. This will override the instance's option.

instance.show(1000) // 1000ms
instance.hide(0) // 0ms

Disable the tippy

You can temporarily prevent a tippy from showing or hiding.

instance.disable()

Re-enable it with this method.

instance.enable()

Destroy the tippy

To permanently destroy and clean up the instance, use this method.

instance.destroy()

The _tippy property is deleted from the reference element upon destruction.

If you're destroying a delegate instance (i.e., one you created with the target option), pass true as an argument to destroy all child instances that may have been created too.

instance.destroy(true)

Update the tippy

You can update any option after the instance has been created using the set() method. Pass an object of new options in.

instance.set({
  arrow: true,
  animation: 'scale',
})

There is also a shortcut for updating the content.

instance.setContent('New content')

Static methods

The tippy function module also has static methods available.

Create a single tooltip and get its instance

const instance = tippy.one(targets, options)

Hide all visible tippys on the page

// Hide all poppers
tippy.hideAllPoppers()
// Hide all except a particular instance
tippy.hideAllPoppers(instance)

Note that if the instance has hideOnClick: false, it won't hide. This will most likely be changed in the next version.

Defaults

You can set the default props for future instances so you don't need to specify them over and over again. Pass an object of options in.

tippy.setDefaults({
  arrow: true,
  duration: 0,
})