Highly customizable Pure Javascript tooltip/popover library – Tippy.js

by

Tippy.js is a highly customizable vanilla JS tooltip and popover library powered by Popper.js. It is a small yet highly customizable JavaScript tooltip library that helps you add customizable, interactive, animated tooltips to any DOM element. You might be wondering why you should use a 14 kB JS library for tooltips and popovers instead of a CSS solution. Pure CSS tooltips are great for simple tooltips when the reference element is positioned in a certain way, but they:
javascript-tooltip
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.



Installation

npm i tippy.js

Libraries

Include the tippy.all.min.js script in your document.

HTML

Give elements a data-tippy attribute containing the tooltip content.

JS

Call the plugin and enable toltip.




Basic example



  
    Tippy Example

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by atomiks. Visit their official github repository for more information and follow for future updates.


Published by Rohit