---
title: Getting Started
path: /v6/getting-started/
index: 1
---

There are two ways to install the package.

### 1. Package Manager

```bash
# npm
npm i tippy.js

# Yarn
yarn add tippy.js
```

In your application, import the `tippy` module, and the core CSS:

```js
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css'; // optional for styling
```

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.](../faq/#im-getting-uncaught-referenceerror-process-is-not-defined)

The core CSS is not required, but provides a base styling for you to use. If
you'd like to use Tippy "headless" without any of the default element rendering
or CSS, use [Headless Tippy](../headless-tippy/).

### 2. CDN

```html
<!-- Development -->
<script src="https://unpkg.com/@popperjs/core@2/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6/dist/tippy-bundle.umd.js"></script>

<!-- Production -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></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.

> **Note**
>
> The CSS automatically gets injected into `<head>` with the CDN
> (`tippy-bundle`). With CSP enabled, you may need to separately link
> `dist/tippy.css` and use `dist/tippy.umd.min.js` instead.

### Usage

```html
<html>
  <head>
    <title>Tippy</title>
  </head>
  <body>
    <button id="myButton">My button</button>

    <script src="https://unpkg.com/@popperjs/core@2"></script>
    <script src="https://unpkg.com/tippy.js@6"></script>
    <script>
      // With the above scripts loaded, you can call `tippy()` with a CSS
      // selector and a `content` prop:
      tippy('#myButton', {
        content: 'My tooltip!',
      });
    </script>
  </body>
</html>
```

### Component Wrappers

#### React

Using React? Use the
[official component package](https://github.com/atomiks/tippyjs-react) which
integrates well with React, allowing you to use Tippy declaratively.

#### Ember

There is the unofficial [ember-tippy](https://github.com/nag5000/ember-tippy) addon
for Emberistas.

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

This **optional** extra import in the documentation:

```js
import 'tippy.js/animations/scale.css';
```

Is equivalent to this using a CDN in the browser:

```html
<link
  rel="stylesheet"
  href="https://unpkg.com/tippy.js@6/animations/scale.css"
/>
```
