Tippy.js is a lightweight, vanilla JS tooltip library powered by Popper.js.
https://atomiks.github.io/tippyjs/
npm install tippy.js
CDN: https://unpkg.com/tippy.js/dist/
<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>
<script>
tippy('button')
</script>
<!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.