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 highly customizable vanilla JS tooltip and popover library powered by Popper.js.
Demo and Documentation
https://atomiks.github.io/tippyjs/
Installation
npm i tippy.jsCDN: 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.
<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>
<!-- Specify option via attribute -->
<button data-tippy="Another tooltip" data-tippy-delay="500">Delayed</button>
<!-- Include Tippy -->
<script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></script>
<!-- OPTIONAL: Set the defaults for the auto-initialized tooltips -->
<script>
tippy.setDefaults({
arrow: true,
delay: 40,
theme: 'my-tippy'
})
</script>
</body>
</html>View the docs for details on all of the options you can supply to customize tooltips to suit your needs.
Browser Support
IE11+: browsers that support MutationObserver and requestAnimationFrame.