1 | <div align="center">
|
2 | <img alt="Tippy.js logo" src="https://github.com/atomiks/tippyjs/raw/master/logo.png" height="117" />
|
3 | </div>
|
4 |
|
5 | <div align="center">
|
6 | <h1>Tippy.js</h1>
|
7 | <p>A highly customizable tooltip and popover library powered by Popper.js.</p>
|
8 | <a href="https://www.npmjs.com/package/tippy.js">
|
9 | <img src="https://img.shields.io/npm/dm/tippy.js.svg?color=%235599ff&style=for-the-badge" alt="npm Downloads per Month">
|
10 | <a>
|
11 | <a href="https://github.com/atomiks/tippyjs/blob/master/LICENSE">
|
12 | <img src="https://img.shields.io/npm/l/tippy.js.svg?color=%23c677cf&style=for-the-badge" alt="MIT License">
|
13 | </a>
|
14 | <br>
|
15 | <br>
|
16 | </div>
|
17 |
|
18 | ## Demo and Documentation
|
19 |
|
20 | ➡️ **[View the latest demo & docs here](https://atomiks.github.io/tippyjs/)**
|
21 |
|
22 | [View migration guide from v4 to v5](https://github.com/atomiks/tippyjs/blob/master/MIGRATION_GUIDE.md)
|
23 |
|
24 | [4.x docs](https://github.com/atomiks/tippyjs/tree/623e8416fbb314741db603c997081512105c0d96/website/src/pages)
|
25 |
|
26 | ## Installation
|
27 |
|
28 | ### Package Managers
|
29 |
|
30 | ```bash
|
31 | # npm
|
32 | npm i tippy.js
|
33 |
|
34 | # Yarn
|
35 | yarn add tippy.js
|
36 | ```
|
37 |
|
38 | Import the `tippy` constructor and the core CSS:
|
39 |
|
40 | ```js
|
41 | import tippy from 'tippy.js';
|
42 | import 'tippy.js/dist/tippy.css';
|
43 | ```
|
44 |
|
45 | ### CDN
|
46 |
|
47 | ```html
|
48 | <script src="https://unpkg.com/popper.js@1"></script>
|
49 | <script src="https://unpkg.com/tippy.js@5"></script>
|
50 | ```
|
51 |
|
52 | The core CSS comes bundled with the default unpkg import.
|
53 |
|
54 | ## Usage
|
55 |
|
56 | For detailed usage information, [visit the docs](https://atomiks.github.io/tippyjs/creating-tooltips/).
|
57 |
|
58 | ## Component Wrappers
|
59 |
|
60 | React: [@tippy.js/react](https://github.com/atomiks/tippy.js-react)
|
61 |
|
62 | ## License
|
63 |
|
64 | MIT
|