Tippy.js

Instance methods

Methods on instances allow you to control the tippy programmatically. See the Tippy Instance page for details on accessing an instance.

show

Programmatically show the tippy at any time:

instance.show() // Default
instance.show(0) // 0ms transition duration

hide

Programmatically hide the tippy at any time:

instance.hide() // Default
instance.hide(500) // 500ms transition duration

disable

Temporarily prevent a tippy from showing or hiding:

instance.disable()

enable

Re-enable a tippy:

instance.enable()

set

You can update any option after the instance has been created. Pass an object of new options in:

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

setContent

Updating the content option has its own method as a shortcut:

instance.setContent('New content')

destroy

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)

Static methods

Static methods belong to the tippy module function rather than a tippy instance.

setDefaults

Set the default options for each new instance:

tippy.setDefaults({
  // Options
})

// Access the current defaults
tippy.defaults

hideAll

Hide all visible tippys on the document:

// Use each tippy's own duration
tippy.hideAll()
// Hide them all instantly
tippy.hideAll({ duration: 0 })
// Hide them all except a particular one
tippy.hideAll({ exclude: tippyInstance })
tippy.hideAll({ exclude: referenceElement })

group

Used to improve UX for elements near each other when their tooltips have a delay. Learn about tippy.group() here.