Customizable Interactive Tooltips In Pure JavaScript – Tippy.js

Category: Javascript , Recommended , tooltip | January 12, 2019
Author: atomiks
Views Total: 3,956
Official Page: Go to website
Last Update: January 12, 2019
License: MIT


Customizable Interactive Tooltips In Pure JavaScript – Tippy.js


Tippy.js is a small yet highly customizable JavaScript tooltip library that helps you add customizable, interactive, animated tooltips to any DOM element.

Key features:

  • Supports all positions: top, right, bottom left
  • Custom trigger events: mouseenter, focus, click or manual.
  • 4 built-in amazing animations: shift, perspective, fade or scale.
  • 4 themes: Google, Light Border, Light, and Translucent
  • Allows to embed any HTML markup inside the tooltip.
  • Useful callback functions.

Install it via NPM:

$ npm install tippy

Basic usage:

Load the JavaScript and CSS files as displayed below in your html document.

<link rel="stylesheet" href="css/tippy.css">
<script src="js/tippy.js"></script>

Add the ‘tippy’ class to your element and define the tooltip content using ‘title’ attribute like this:

<span class="tippy" title="I'm a tooltip!">Hover Me</span>

Initialize the tooltip library by creating a new Tippy object as this:

new Tippy('.tippy')

Config the tooltip using the following options. Note that all the options as listed below are allowed to be passed via JavaScript:

new Tippy('.tippy', { 
    placement: 'top',
    livePlacement: true,
    trigger: 'mouseenter focus',
    animation: 'shift-away',
    html: false,
    animateFill: true,
    arrow: false,
    delay: 0,
    duration: [350, 300],
    interactive: false,
    interactiveBorder: 2,
    theme: 'dark',
    size: 'regular',
    distance: 10,
    offset: 0,
    hideOnClick: true,
    multiple: false,
    followCursor: false,
    inertia: false,
    updateDuration: 350,
    sticky: false,
    appendTo: function appendTo() {
      return document.body;
    zIndex: 9999,
    touchHold: false,
    performance: false,
    dynamicTitle: false,
    flip: true,
    flipBehavior: 'flip',
    arrowType: 'sharp',
    arrowTransform: '',
    maxWidth: '',
    target: null,
    allowTitleHTML: true,
    popperOptions: {},
    createPopperInstanceOnInit: false,

Or via HTML ‘data’ attributes:

<span class="tippy" 
      title="I'm a tooltip!"
      Hover Me

Callback functions available:

new Tippy('.tippy', { 

   onShow: function onShow() {},
   onShown: function onShown() {},
   onHide: function onHide() {},
   onHidden: function onHidden() {}

API methods.

// show the tippy[duration])

// hide the tippy

// enable the tippy

// disable the tippy

// destroy the tippy


v3.4.0 (01/12/2018)

  • Follow cursor additions

v3.3.0 (12/08/2018)

  • Add maxWidth to updatePopperElement
  • Refactor code into more sensible module

v3.2.0 (11/18/2018)

  • Use state.isMounted over state.isVisible in destroy()

v3.1.1 (11/03/2018)

  • New themes: `light-border` and `google`

v3.1.0 (10/12/2018)

  • Fix setContent() resetting followCursor position

v3.0.3 (09/29/2018)

  • Bugfix

v3.0.1 (09/24/2018)

  • Bugfix

v2.6.0 (09/08/2018)

  • Bugfix

v2.5.4 (07/14/2018)

  • Bugfix

You Might Be Interested In:

Leave a Reply