Getting Started

Option 1: CDN

Include this script tag from the unpkg CDN in your document before your own scripts.

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

Place it at the bottom of the <body> or in the <head> with a defer attribute.

Option 2: Package Manager

Install using either npm or Yarn.

# npm
npm i tippy.js

# Yarn
yarn add tippy.js

Then, import the tippy module and its CSS.

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

Distribution Files

Tippy is distributed in two formats: umd (used by the browser and Node modules), and esm (ES6 syntax used by module bundlers like webpack).

  • tippy.all.js is all dependencies (tippy.js, popper.js, and the CSS) in a single file. The CSS stylesheet gets injected into the document <head>.
  • tippy.standalone.js is tippy.js by itself, externally importing popper.js.
  • tippy.js includes popper.js bundled.

Frameworks

Tippy.js is making an effort to create official wrappers for various frameworks. At present, there is an official React wrapper available:

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.