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.