https://github.com/codewithkyle/tooltipper
A lightweight JavaScript library for implementing tooltips.
https://github.com/codewithkyle/tooltipper
esmodule lightweight tooltip tooltips
Last synced: 2 months ago
JSON representation
A lightweight JavaScript library for implementing tooltips.
- Host: GitHub
- URL: https://github.com/codewithkyle/tooltipper
- Owner: codewithkyle
- License: mit
- Created: 2020-06-17T11:22:48.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-28T13:11:57.000Z (about 2 years ago)
- Last Synced: 2025-04-07T01:39:32.418Z (3 months ago)
- Topics: esmodule, lightweight, tooltip, tooltips
- Language: TypeScript
- Homepage: https://codewithkyle.github.io/tooltipper/
- Size: 136 KB
- Stars: 10
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Tooltipper
A lightweight (1kB) JavaScript library for implementing tooltips.
## Installation
Install via NPM:
```sh
npm i -S tooltipper
```
Install via CDN:
```html
```
## Usage
Create tooltips using the `tooltip` attribute:
Create tooltips by adding the `tooltip` attribute to an element with an `aria-label` attribute:
> **Please note** that tooltipper is an unopinionated library. All we aim to do is create, track, and remove custom `` elements within the DOM. You are responsible for providing the CSS.
## Example SCSS
[Click here](https://codewithkyle.github.io/tooltipper/) to view the example.
```scss
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;
}
}
```