JSPM

  • Created
  • Published
  • Downloads 2592238
  • Score
    100M100P100Q198570F
  • License MIT

Vanilla JS Tooltip Library

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

Build Status npm Downloads 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 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/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.