Tippy.js

Lifecycle Hooks

Lifecycle hooks provide a way to run code in response to a certain part of a tippy's lifecycle. They are listed here in the usual order in which they occur. Every lifecycle hook takes the instance as its first argument.

These functions are how you hook into a tippy instance's lifecycle to add functionality via a plugin.

#onCreate

Executed a single time when a tippy is first created.

tippy(reference, {
  onCreate(instance) {
    // ...
  },
});

#onTrigger

Executed when a tippy is triggered by a DOM event (e.g. mouseenter, focus, click), but before it starts to show.

tippy(reference, {
  onTrigger(instance, event) {
    // ...
  },
});

#onShow

Executed when a tippy begins to show, but before it gets mounted to the DOM.

You can optionally return false to cancel the tippy from showing.

tippy(reference, {
  onShow(instance) {
    // ...
    return false; // cancels it
  },
});

Note: plugins ignore return false due to compositional issues. Only a tippy instance's own props can use this feature.

#onMount

Executed when the tippy element is mounted to the DOM.

tippy(reference, {
  onMount(instance) {
    // ...
  },
});

#onShown

Executed when a tippy has fully transitioned in.

tippy(reference, {
  onShown(instance) {
    // ...
  },
});

#onUntrigger

Executed when a tippy was untriggered by a DOM event (e.g. mouseleave, blur, click), but before it starts to hide.

tippy(reference, {
  onUntrigger(instance, event) {
    // ...
  },
});

#onHide

Executed when a tippy begins to hide and transition out.

You can optionally return false to cancel the tippy from hiding.

tippy(reference, {
  onHide(instance) {
    // ...
    return false; // cancels it
  },
});

Note: plugins ignore return false due to compositional issues. Only a tippy instance's own props can use this feature.

#onHidden

Executed when a tippy has fully transitioned out and unmounted from the DOM.

tippy(reference, {
  onHidden(instance) {
    // ...
  },
});

#onBeforeUpdate

Executed before a tippy's props are updated (via .setContent() or .setProps()).

tippy(reference, {
  onBeforeUpdate(instance, updatedProps) {
    // ...
  },
});

#onAfterUpdate

Executed after a tippy's props are updated (via .setContent() or .setProps()).

tippy(reference, {
  onAfterUpdate(instance, updatedProps) {
    // ...
  },
});

#onDestroy

Executed a single time when a tippy is destroyed.

tippy(reference, {
  onDestroy(instance) {
    // ...
  },
});