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;
}
}