Skip to content
Tippy Logo

Tippy.js

View on GitHub
Currently v6.2.7

Methods

#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();

#hide

Programmatically hide the tippy at any time:

instance.hide();

#hideWithInteractivity

Available from v6.2.0

Will hide the tippy only if the cursor is outside of the tippy's interactive region. This allows you to programmatically hook into interactive behavior upon a mouseleave event if implementing custom event listeners.

// Required: pass the mouse event object in from your event listener instance.hideWithInteractivity(mouseEvent);

#disable

Temporarily prevent a tippy from showing or hiding:

instance.disable();

#enable

Re-enable a tippy:

instance.enable();

#setProps

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

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

#setContent

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

instance.setContent('New content');

#unmount

Unmount the tippy from the DOM:

instance.unmount();

This allows you to integrate spring animation libraries as an alternative to CSS. For instance, you'd call this in their onComplete() (or equivalent) callback.

#clearDelayTimeouts

Clears the instance's delay timeouts. There will likely be only very rare use cases for this.

instance.clearDelayTimeouts();

#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.

#Static methods

Static methods belong to the tippy module for global behavior.

#setDefaultProps

Set the default props for each new instance:

tippy.setDefaultProps({ // Props }); // Access the current default props tippy.defaultProps;

#hideAll

Hide all visible tippies on the document:

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

In the CDN (umd) version, it's available as tippy.hideAll().

Tippy InstanceAJAX

© 2020 — MIT License

Icons made by Freepik from www.flaticon.com