<div align="center"> <img alt="Tippy.js logo" src="https://github.com/atomiks/tippyjs/raw/master/logo.png" height="117" /> </div> <div align="center"> <h1>Tippy.js</h1> <p>The complete tooltip, popover, dropdown, and menu solution for the web</p> <a href="https://www.npmjs.com/package/tippy.js"> <img src="https://img.shields.io/npm/dm/tippy.js.svg?color=%235599ff&style=for-the-badge" alt="npm Downloads per Month"> <a> <a href="https://github.com/atomiks/tippyjs/blob/master/LICENSE"> <img src="https://img.shields.io/npm/l/tippy.js.svg?color=%23c677cf&style=for-the-badge" alt="MIT License"> </a> <br> <br> </div>

Demo and Documentation

➡️ View the latest demo & docs here

Migration Guide

Installation

Package Managers

# npm
npm i tippy.js

# Yarn
yarn add tippy.js

Import the tippy constructor and the core CSS:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css';

CDN

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>

The core CSS comes bundled with the default unpkg import.

Usage

For detailed usage information, visit the docs.

Component Wrappers

React: @tippyjs/react (official)
Ember: ember-tippy (unofficial)

License

MIT

Tippyjs

Install / Use

README