JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Highly customizable vanilla JS tooltip/popover library
    Filed under  › 

    • 🔾71%Overall
    • 5,405
    • 19 hours
    • 🕩314
    • 👥2

    Logo

    Tippy.js

    Build Status npm Downloads gzip Size

    Tippy.js is a highly customizable vanilla JS tooltip and popover library powered by Popper.js.

    Demo and Documentation

    https://atomiks.github.io/tippyjs/

    Installation

    npm i tippy.js
    

    CDN: https://unpkg.com/tippy.js/dist/

    Basic Usage

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

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

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

    <script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></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/tippy.js@3/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>
    

    View the docs for details on all of the options you can supply to customize tooltips to suit your needs.

    Browser Support

    IE11+: browsers that support MutationObserver and requestAnimationFrame.

    Component Wrappers

    License

    MIT

    Show All