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

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:

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

Libraries

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

<script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js">script>

HTML

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

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

JS

Call the plugin and enable toltip.

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

Basic example

>
>
  >
    >
  >
  >
    -- Elements with a `data-tippy` attribute -->
    <button data-tippy="Tooltip">Text>
    <button data-tippy="Another tooltip">Text>
    -- Specify option via attribute -->
    <button data-tippy="Another tooltip" data-tippy-delay="500">Delayed>
 
    -- Include Tippy -->
    >
    -- OPTIONAL: Set the defaults for the auto-initialized tooltips -->
    >
  >
>

See live demo and download source code.

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

Related