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

Tippy.js is a lightweight, vanilla JS tooltip library powered by Popper.js.

Demo and documentation

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

Installation

npm install --save tippy.js

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

Basic usage

1. Give elements a `title` attribute containing the tooltip content.

<button title="Tooltip">Text</button>
<button title="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 `title` attributes -->
  <button title="Tooltip">Text</button>
  <button title="Another tooltip">Text</button>

  <!-- Include Tippy -->
  <script src="https://unpkg.com/tippy.js@2.0.9/dist/tippy.all.min.js"></script>
  <!-- Initialize tooltips by calling the `tippy` function with a CSS selector -->
  <script>
    tippy('button')
  </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