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 and popover library powered by Popper.js.

Demo and Documentation

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

Installation

npm i 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>`.

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

Basic example

<!DOCTYPE html>
<html>
<head><title>Tippy Example</title></head>
<body>
  <!-- Elements with a `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@3/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.

Component wrappers

React component

tippy.js