Skip to content
You're viewing the previous major version's docs. Click here to view the latest version.
Tippy Logo

Tippy.js

View on GitHub
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

#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 StartedCustomizing Tooltips

© 2022 — MIT License

Icons made by Freepik from www.flaticon.com