Skip to content
Tippy Logo

Tippy.js

View on GitHub
Powered by Popper.js

Getting Started

Option 1: CDN

Tippy uses popper.js as a dependency for positioning. Include these script tags in your document:

<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@4"></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! They indicate the major version and won't have breaking changes when new versions get released.

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:

import tippy from 'tippy.js'

Usage poll

❤️ If you have time, please answer this poll about how you are using tippy.js!

Package

You can view its contents here: https://unpkg.com/tippy.js@4/

umd is used by the browser and Node.js, and esm by module bundlers.

  • index.all.js = JS + CSS injected into <head>
  • index.js = JS alone
  • index.css = CSS alone

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.

DemoCreating Tooltips