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.
<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.
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
@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:
Is equivalent to this using a CDN in the browser:
<link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/backdrop.css" />
Tippy includes a CSS stylesheet by default for the base tooltip styling, fade animation, CSS arrows, and other required CSS.
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.
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
- React: @tippy.js/react