Customizable Interactive Tooltips In Pure JavaScript – Tippy.js

Category: Javascript , Recommended , tooltip | July 14, 2018
Author: atomiks
Views Total: 1,889
Official Page: Go to website
Last Update: July 14, 2018
License: MIT

Preview:

Customizable Interactive Tooltips In Pure JavaScript – Tippy.js

Description:

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.
  • Light & dark themes.
  • Allows to embed any HTML markup inside the tooltip.
  • Useful callback functions.

Install it via NPM:

$ npm install tippy

Basic usage:

Insert the JavaScript and CSS files as displayed below into 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!"
      data-OPTION="VALUE">
      Hover Me
</span>

Callback functions available:

new Tippy('.tippy', { 

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

Changelog:

v2.5.4 (07/14/2018)

  • Bugfix

Leave a Reply