Pop-Pop.css
A pure CSS tooltip library with no dependencies and support for CSS custom properties.
Demo
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
<link rel="stylesheet" href="node_modules/@sn8z/pop-pop.css/dist/pop-pop.min.css">
CDN
You can import the CSS from unpkg.
<link rel="stylesheet" href="https://unpkg.com/@sn8z/pop-pop.css@latest/dist/pop-pop.min.css">
Download
You can also download the CSS from GitHub and include it to your html as you would normally do.
<link rel="stylesheet" href="pop-pop.min.css">
Usage
To add a tooltip simply add the attribute data-pop and an aria-label to the tag where you want it to appear.
<div data-pop aria-label="Tooltip text goes here">...</div>
For more examples and configuration check out the website.
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!