Package Exports

tippy.js
tippy.js/dist/tippy
tippy.js/dist/tippy.all
tippy.js/dist/tippy.css
tippy.js/dist/tippy.js
tippy.js/dist/tippy.standalone
tippy.js/dist/tippy.standalone.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (tippy.js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Tippy.js

gzip Size

Tippy.js is a highly customizable vanilla JS tooltip/popover library powered by Popper.js.

Demo and documentation

https://atomiks.github.io/tippyjs/

Installation

npm install tippy.js

CDN: https://unpkg.com/tippy.js/dist/

Basic usage

1. Give elements a `data-tippy` attribute containing the tooltip content.

<button data-tippy="Tooltip">Text</button>
<button data-tippy="Another tooltip">Text</button>

2. Include the `tippy.all.min.js` script in your document, which automatically injects Tippy's CSS into `head`.

Use the full version link! Visit the link in src below to get the latest version.

<script src="https://unpkg.com/tippy.js/dist/tippy.all.min.js"></script>

3. Now call `tippy()` with a CSS selector to give them a nice tooltip!

<script>
  tippy('button')
</script>

Basic example

<!DOCTYPE html>
<html>
<head><title>Tippy Example</title></head>
<body>
  <!-- Elements with the `data-tippy` attribute -->
  <button data-tippy="Tooltip">Text</button>
  <button data-tippy="Another tooltip">Text</button>

  <!-- Include Tippy -->
  <script src="https://unpkg.com/tippy.js@next/dist/tippy.all.min.js"></script>
</body>
</html>

View the docs for details on all of the options you can supply to customize tooltips to suit your needs.

tippy.js