A lightweight (1kB) JavaScript library for implementing tooltips.
Install via NPM:
npm i -S tooltipper
Install via CDN:
<script type="module" src="https://unpkg.com/tooltipper@1/tooltipper.min.mjs"></script> <script defer src="https://unpkg.com/tooltipper@1/tooltipper.min.js"></script>
Create tooltips using the tooltip attribute:
<a href="#" tooltip="Edit file"> <svg /> </a>
Create tooltips by adding the tooltip attribute to an element with an aria-label attribute:
<a href="#" aria-label="Edit file" tooltip> <svg /> </a>
Please note that tooltipper is an unopinionated library. All we aim to do is create, track, and remove custom
<tool-tip>elements within the DOM. You are responsible for providing the CSS.
Click here to view the example.
tool-tip { background-color: #424242; color: #fff; border-radius: 0.125rem; line-height: 24px; height: 24px; white-space: nowrap; padding: 0 0.5rem; font-size: 0.75rem; font-weight: 600; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); pointer-events: none; transform-origin: center; /* The visible class is applied once the tool-tip element as been appended to the body & positioned correctly */ &.visible { animation: limitedTooltip 1725ms 150ms linear forwards; } } @keyframes limitedTooltip { 0% { opacity: 1; } 4% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; animation-timing-function: ease-in-out; } }