Interactive Tooltip, Popover, Dropdown, and Menu Library In Pure JavaScript | Tippy.js

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 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 your HTML doc.

<script src="https://unpkg.com/[email protected]"></script>
<script src="https://unpkg.com/[email protected]"></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 of the options is 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


See Demo And Download

Official Website(atomiks): Click Here

This superior jQuery/javascript plugin is developed by atomiks. For extra Advanced usage, please go to the official website.

Related Posts

Confetti-Falling-Animation-Effect-party

Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…

jquery-cookie-consent

Simple jQuery Cookie Consent Plugin

jquery.cookie-consent is a simple jQuery plugin to request consent to use cookies. An easy-to-use and highly customizable cookie consent bar that informs your visitors of the use…

Timepicker-Plugin-for-jQuery

Timepicker JavaScript Plugin for jQuery Inspired by Google Calendar

jquery.timepicker is a lightweight jQuery timer plugin inspired by Google Calendar. It supports both mouse and keyboard navigation and weighs 5.5KB minified and compact. Features: Highly customizable…

angular-ngx-carousel-slider

A Lightweight, Touchable, and Responsive Angular Universal Carousel Library

ngxCarousel is a lightweight, tactile, and responsive library for creating an angular carousel. No dependencies, no more hammer. Must Read: Angular Responsive Image Slider With Lightbox Popup…

vue-fullpage-modal

First Mobile Full-screen Modal Popup Library For Vue

Vue full-page modal is a responsive, mobile-compatible, screen-friendly pop-up library for Vue.js. Must Read: Modal Component Is Written in Vanilla JS | ensemble Modal How to make…

random-number-picker

Generate a Random Number Picker In Vanilla JavaScript

Random Number Picker is a Vanilla JS-based number picker that allows you to generate a random number within a specified range. Must Read: Generating Lottery Numbers Using…