Tippy.js is a highly customizable vanilla JS tooltip and popover library powered by Popper.js.
https://atomiks.github.io/tippyjs/
npm i tippy.js
CDN: https://unpkg.com/tippy.js/dist/
<button data-tippy="Tooltip">Text</button>
<button data-tippy="Another tooltip">Text</button><script src="https://unpkg.com/tippy.js@3/dist/tippy.all.min.js"></script><!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.
IE11+: browsers that support MutationObserver and requestAnimationFrame.
MIT