❗ You're viewing the previous major version's docs. Click here to view the latest version.

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';

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.

#2. CDN

<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></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.

#Development version

While developing, it's recommended to use the development file which includes helpful warnings and error messages when something goes wrong:

<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>

When you're finished developing (or deploying for production), you can remove everything after @5 (the production file as listed before).

#CSS

Tippy includes a CSS stylesheet by default for the base tooltip styling, fade animation, CSS arrows, and other required CSS.

#CDN

When including the script link above via CDN, the CSS stylesheet is injected into its own <style> tag in <head>. If you have CSP enabled, you should use dist/tippy.iife.js and link the stylesheet dist/tippy.css separately instead of relying on injection.

#Contents

View the package contents on unpkg

dist/tippy-bundle.js = Core JS + Core CSS injected into <head> (default for CDN version)
dist/tippy.js = Core JS (default for ESM/CJS versions)
dist/tippy.css = Core CSS

#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.

Note
This is not a required import — it's just a demonstration of how you will import extra parts of the library depending on your choice when reading the documentation.

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@5/animations/scale.css"
/>

#Component wrappers

React: @tippy.js/react

#JavaScript syntax

This documentation is making use of new JavaScript features (ES6+) that old browsers like IE11 do not support. Although Tippy.js itself supports IE11, the code written in these docs may need to be transpiled using a tool like Babel to a compatible format if you want to copy and paste it.

Getting Started Customizing Tooltips