# @sn8z/pop-pop.css
> A pure CSS tooltip library
Latest version **1.0.2** (published 2019-10-31) · MIT license · 0 weekly downloads
## Install
```sh
npm install @sn8z/pop-pop.css
pnpm add @sn8z/pop-pop.css
yarn add @sn8z/pop-pop.css
bun add @sn8z/pop-pop.css
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-10-31 |
| First published | 2019-10-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 39.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Marcus Sneitz |
| Maintainers | sn8z |
| Keywords | tooltip, popper, popover, title, css |
## Links
- npm: https://www.npmjs.com/package/@sn8z/pop-pop.css
- Repository: https://github.com/Sn8z/pop-pop.css
- Homepage: https://sn8z.github.io/pop-pop.css/
- Issues: https://github.com/Sn8z/pop-pop.css/issues
- npm.io page: https://npm.io/package/@sn8z/pop-pop.css
## Alternatives
- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads
## Recent versions
- 1.0.2 (latest) — 2019-10-31
- 1.0.0 (beta) — 2019-10-27
- 1.0.1 — 2019-10-28
## README
# Pop-Pop.css
[](https://github.com/Sn8z/pop-pop.css/blob/master/LICENSE)
A __pure CSS__ tooltip library with __no dependencies__ and support for __CSS custom properties__.
## Demo
[Pop-Pop.css website](https://sn8z.github.io/pop-pop.css/)
## Features
* No dependencies
* Pure CSS
* ~ 14kb minified (~ 1,3kb when minified & Gzipped)
* Customizable
* Supports CSS custom properties
* Supports multiple browsers
## Installation & Basic usage
### NPM / Yarn
```
npm install @sn8z/pop-pop.css
```
```
yarn add @sn8z/pop-pop.css
```
You can then import the normal CSS file or the minified version from the *dist* folder in the package.
```
@import "node_modules/@sn8z/pop-pop.css/dist/pop-pop.min.css";
```
or
```
```
### CDN
You can import the CSS from unpkg.
```
```
### Download
You can also download the CSS from GitHub and include it to your html as you would normally do.
```
```
### Usage
To add a tooltip simply add the attribute *data-pop* and an *aria-label* to the tag where you want it to appear.
```
...
```
For more examples and configuration check out the [website](https://sn8z.github.io/pop-pop.css/).
## Contribute
If you want to contribute with enhancements and/or bugfixes:
* Fork and/or clone the repo
```
git clone https://github.com/Sn8z/pop-pop.css.git
```
* Enter the directory
```
cd pop-pop.css
```
* Run
```
npm install
```
* Edit *pop-pop.scss* in the *src* folder.
* Run the following command to generate the minified and normal CSS file.
```
npm run build:all
```
* Open the *index.html* file found in the *docs* folder to confirm things are working as expected.
* If everything works as expected open a Pull request with a brief explanation!
## Sponsor
If you enjoy using Pop-Pop.css consider [supporting me here on GitHub by becoming a sponsor](https://github.com/sponsors/Sn8z)!
### Made by [@Sn8z](https://github.com/Sn8z)
---
_Source: https://npm.io/package/@sn8z/pop-pop.css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._