Skip to content
Tippy Logo

Tippy.js

View on GitHub
v5.2.0

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

#Node vs. Browser

This documentation defaults to module imports in all examples, so be aware that the following import path using a module bundler in Node:

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

Is equivalent to this using a CDN in the browser:

<link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/backdrop.css" />

#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

#Component wrappers

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

DemoCreating Tooltips