Skip to content

Latest commit

 

History

History
82 lines (71 loc) · 2.42 KB

README.md

File metadata and controls

82 lines (71 loc) · 2.42 KB
Raw

Pop-Pop.css

npm npm bundle size npm GitHub license

A pure CSS tooltip library with no dependencies and support for CSS custom properties.

Demo

Pop-Pop.css website

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!

Made by @Sn8z