---
title: Lifecycle Hooks
path: /v5/lifecycle-hooks/
index: 10
---

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`](../tippy-instance/) as its first
argument.

These functions are how you hook into a tippy instance's lifecycle to add
functionality via a [plugin](../plugins/).

#### onCreate

Executed a single time when a tippy is first created.

```js
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.

```js
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.

```js
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.

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

#### onShown

Executed when a tippy has fully transitioned in.

```js
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.

```js
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.

```js
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.

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

#### onBeforeUpdate

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

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

#### onAfterUpdate

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

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

#### onDestroy

Executed a single time when a tippy is destroyed.

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