Tippy.js

v6.3.7

Getting Started

There are two ways to install the package.

#1. Package Manager

# npm
npm i tippy.js

# Yarn
yarn add tippy.js

In your application, import the tippy module, and the core CSS:

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css'; // optional for styling

This assumes you're using a module bundler like webpack, Rollup, or Parcel. If you're getting an error message about process inside the browser, see the FAQ for help.

The core CSS is not required, but provides a base styling for you to use. If you'd like to use Tippy "headless" without any of the default element rendering or CSS, use Headless Tippy.

#2. CDN

<!-- Development -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

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

Place them at the very bottom of the <body>, ensuring they are placed before your own scripts. The version numbers after @ are important, make sure they don't get removed.

Note
The CSS automatically gets injected into <head> with the CDN (tippy-bundle). With CSP enabled, you may need to separately link dist/tippy.css and use dist/tippy.umd.min.js instead.

#Usage

<html>
  <head>
    <title>Tippy</title>
  </head>
  <body>
    <button id="myButton">My button</button>

    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script>
      // With the above scripts loaded, you can call `tippy()` with a CSS
      // selector and a `content` prop:
      tippy('#myButton', {
        content: 'My tooltip!',
      });
    </script>
  </body>
</html>

#Component Wrappers

#React

Using React? Use the official component package which integrates well with React, allowing you to use Tippy declaratively.

#Ember

There is the unofficial ember-tippy addon for Emberistas.

#Optional extra imports

For brevity, this documentation shows imports via a module bundler in Node. If you're using the CDN, you'll be using <link> tags instead.

This optional extra import in the documentation:

import 'tippy.js/animations/scale.css';

Is equivalent to this using a CDN in the browser:

<link
  rel="stylesheet"
  href="https://unpkg.com/tippy.js@6/animations/scale.css"
/>

Demo Constructor