Interactive Tooltip, Popover, Dropdown, and Menu Library In Pure JavaScript

Tippy.js is the complete solution for tooltip, dropdown, and dropdown menu for the web, and it’s powered by Popper. This plugin JavaScript hints library that helps you add customizable, interactive, dynamic, accessible, and easy to touch tooltips to any DOM element.

It’s a general abstraction of the logic and design of elements that pop out of the document flow and float alongside a reference element, added above the user interface.

Key options:

Smart: optimized positioning engine for flipping and overflow prevention
Universal: works with a mouse, keyboard, and touch inputs
Accessible: WAI-ARIA compliant
Themeable: style via custom CSS, includes extra themes and animations
Typed: TypeScript support out of the box

How to make use of it:

Install it by way of NPM:

$ npm install tippy

Import the tippy library.

import tippy from 'tippy.js'; 
import 'tippy.js/dist/tippy.css';
// Additional Borders
import 'tippy.js/dist/border.css';

Or load the JavaScript information as displayed under in your HTML doc.

<script src="https://unpkg.com/popper.js@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

Import themes as per your needs.

import 'tippy.js/themes/light.css';
import 'tippy.js/themes/light-border.css';
import 'tippy.js/themes/material.css';
import 'tippy.js/themes/translucent.css';

Add the ‘tippy’ class to your component and outline the tooltip content utilizing the ‘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 brand new Tippy object like this:

new Tippy('.tippy')

Config the tooltip utilizing the next options. Note that each one the options listed.

new Tippy('.tippy', { 

    // enable accessibility
    a11y: true,
    aria: {
      // `null` when interactive is enabled
      content: 'auto', // `aria-*` attribute
      // `true` when interactive is enabled
      expanded: 'auto', // `aria-expanded` attribute
    },
    role: 'tooltip',

    // allows html content
    allowHTML: false,

    // animate the background fill color
    animateFill: true,

    // more animation are:
    // import 'tippy.js/animations/scale.css';
    // import 'tippy.js/animations/scale-subtle.css';
    // import 'tippy.js/animations/scale-extreme.css';
    animation: 'fade',

    // 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 & offset in pixels
    offset: [5, 10],

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

    // 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,

    // max width 
    maxWidth: 350,

    // positions the tooltip
    placement: 'top',

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

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

    // target CSS selector
    target: '',

    // theme name
    // 'light', 'light-border', 'material', 'translucent'
    theme: '',

    // enables touch events
    touch: true,

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

    // target trigger element
    triggerTarget: null,

    // move transition
    moveTransition: 'transform 0.2s ease-out',

    // z-index property
    zIndex: 9999
    
})

Via HTML ‘data-tippy-OPTION’ attributes:

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

Callback capabilities obtainable:

new Tippy('.tippy', { 

    onAfterUpdate: function onAfterUpdate() {},
    onBeforeUpdate: function onBeforeUpdate() {},
    onCreate: function onCreate() {},
    onDestroy: function onDestroy() {},
    onHidden: function onHidden() {},
    onHide: function onHide() {},
    onMount: function onMount() {},
    onShow: function onShow() {},
    onShown: function onShown() {},
    onTrigger: function onTrigger() {},
    onUntrigger: function onUntrigger() {},
    onClickOutside: function(){}
    
})

API strategies.

// show the tippy
instance.show()

// hide the tippy
instance.hide()

// enable the tippy
instance.enable()

// disable the tippy
instance.disable()

// destroy the tippy
instance.destroy()

// update the tippy
instance.setProps({
  arrow: true,
  animation: 'scale',
})

// set new content
instance.setContent('New content')

Customizable Interactive Tooltips In Pure JavaScript, Tippy.js Plugin/Github