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

by Posted on

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.

<script src="https://unpkg.com/[email protected]/dist/tippy.all.min.js"></script>

HTML

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

<button data-tippy="Tooltip">Text</button>
<button data-tippy="Another tooltip">Text</button>

JS

Call the plugin and enable toltip.

 <script>
      tippy.setDefaults({
        arrow: true,
        delay: 40,
        theme: 'my-tippy'
      })
    </script>




Basic example

<!DOCTYPE html>
<html>
  <head>
    <title>Tippy Example</title>
  </head>
  <body>
    <!-- Elements with a `data-tippy` attribute -->
    <button data-tippy="Tooltip">Text</button>
    <button data-tippy="Another tooltip">Text</button>
    <!-- Specify option via attribute -->
    <button data-tippy="Another tooltip" data-tippy-delay="500">Delayed</button>
 
    <!-- Include Tippy -->
    <script src="https://unpkg.com/[email protected]/dist/tippy.all.min.js"></script>
    <!-- OPTIONAL: Set the defaults for the auto-initialized tooltips -->
    <script>
      tippy.setDefaults({
        arrow: true,
        delay: 40,
        theme: 'my-tippy'
      })
    </script>
  </body>
</html>

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 admin