Customizable Interactive Tooltips In Pure JavaScript – Tippy.js

Category: Javascript , Recommended , tooltip | June 4, 2019
Author: atomiks
Views Total: 4,701
Official Page: Go to website
Last Update: June 4, 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, accessible, touch-friendly 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.
  • Allows multiple tooltips on the same element.
  • 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>

Load a theme CSS.

<link rel="stylesheet" href="[email protected]/themes/google.css">
<link rel="stylesheet" href="[email protected]/themes/light.css">
<link rel="stylesheet" href="[email protected]/themes/light-border.css">
<link rel="stylesheet" href="[email protected]/themes/translucent.css">

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

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

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

new Tippy('.tippy')

Or auto-init the Tippy using the ‘data-tippy’ attribute.

<span data-tippy="I will be created automatically">Hover Me</span>

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

new Tippy('.tippy', { 

    // enable accessibility
    a11y: true,
    aria: 'describedby',
    role: 'tooltip',

    // allows html content
    allowHTML: true,

    // animate the background fill color
    animateFill: true,

    // "shift-away",  "shift-toward", "fade",  "scale", "perspective"
    animation: 'shift-away',

    // where the tooltip should be appended to
    appendTo: () => document.body,
    // shows the tooltip arrow
    arrow: false,

    // "sharp", "round"
    arrowType: 'sharp',

    // "scrollParent", "window",  "viewport", or an HTMLElement
    boundary: 'scrollParent',

    // the content of the tippy
    // string,  Element, or Function
    content: '',

    // animation delay
    delay: 0,

    // distance in pixels
    distance: 10,

    // duration of the animation
    duration: [325, 275],

    // enables flip animation
    flip: true,
    flipBehavior: 'flip',
    flipOnUpdate: false,

    // makes the tooltip always follow the cursor
    followCursor: false,

    // hides the tooltip on click
    hideOnClick: true,

    // ignores the data-tippy-* attribute
    ignoreAttributes: false,

    // applies an inertial slingshot effect to the animation
    inertia: false,

    // enables interactive tooltip
    interactive: false,
    interactiveBorder: 2,
    interactiveDebounce: 0,

    // lazy load the positioning engine 
    lazy: true,

    // max width 
    maxWidth: 350,

    // enables multiple tooltips on the same element
    multiple: false,

    // offset in pixels
    offset: 0,

    // positions the tooltip
    placement: 'top',

    // popper.js options
    popperOptions: {},
    // shows the tooltip on init
    showOnInit: false,

    // "small", "regular", "large"
    size: 'regular',

    // makes the tooltip sticky
    sticky: false,

    // target CSS selector
    target: '',

    // theme name
    theme: 'dark',

    // enables touch events
    touch: true,
    touchHold: false,

    // custom trigger events
    trigger: 'mouseenter focus',

    // target trigger element
    triggerTarget: null,

    // update duration
    updateDuration: 0,

    // a function that, when defined, will wait until you manually invoke the  show() method when a tippy is triggered.
    wait: null,

    // z-index property
    zIndex: 9999

Via HTML ‘data-tippy-OPTION’ attributes:

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

Callback functions available:

new Tippy('.tippy', { 

    onHidden() {},
    onHide() {},
    onMount() {},
    onShow() {},
    onShown() {},
    onTrigger() {},

API methods.

// show the tippy[duration])

// hide the tippy

// enable the tippy

// disable the tippy

// destroy the tippy

// update the tippy
  arrow: true,
  animation: 'scale',
instance.setContent('New content')


v4.3.3 (06/04/2019)

  • Fix followCursor having incorrect offset when using a variation placement (-start or -end)

v4.3.2 (06/03/2019)

  • Mounting behavior (IE11 scrollbar flicker)
  • followCursor fixes (respects boundary & fix regression where initial was not placed correctly on touch devices on first show)
  • Ensure destroy()’s unmounting of the tippy can never be impeded
  • Fix the longstanding interactive scrolling issue
  • Fix path selector having pointer-events: auto

v4.3.1 (05/11/2019)

  • Improve support for nested tippys by using per-instance hideOnClick handler
  • Add data-tippy-stylesheet to style tag

v3.4.0 (01/12/2019)

  • 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