A highly customisable, minimal, pure CSS tooltip library
Cool customisable tooltips made from pure CSS
Lightweight • Accessible • Customisable • Simple
Cooltipz.css is a pure CSS tooltip library that is lightweight, modern, accessible, customisable and easy to use.
Official documentation: cooltipz.jackdomleo.dev.
Play with Cooltipz.css on CodePen.
Features
aria-label
attributesdata-
attributesIn the below CDN links:
:version
with a version listed here (latest version is always recommended). If you always want to get the latest stylesheet, remove @:version
completely (Not recommended).:file
with one of the below:
cooltipz.css
(Expanded stylesheet)
cooltipz.min.css
(Minfied stylesheet)
<!-- HTML -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cooltipz-css@:version/:file" />
/* Or CSS */
@import url('https://cdn.jsdelivr.net/npm/cooltipz-css@:version/:file');
It's best practice to install Cooltipz.css as a dependency rather than a dev dependency. You can install cooltipz-css
via npm or yarn.
First install via npm
npm install cooltipz-css --save
Or install via yarn
yarn add cooltipz-css
Then import into your JavaScript
import 'cooltipz-css';
Or use the SCSS or CSS into your Sass/SCSS
In the below example, replace :file
with one of the options below:
src/cooltipz
(.scss file)
cooltipz.css
(Expanded .css)
cooltipz.min.css
(Minified .css)
/* Webpack */
@use '~cooltipz-css/:file' as *;
/* Non-webpack */
@use 'path/to/node_modules/cooltipz-css/:file' as *;
Type - MIT
You have the right to use this library in any project FREE of charge for personal and commercial use.
You do not have the right to resell, sublicense or redistribute (even for free) this library.
Cooltipz.css is licensed under MIT. As a minimum, you are required to KEEP AND NOT REMOVE the following code at the beginning of your downloaded/installed Cooltipz.css CSS, where :version
is replaced with the version number you are using:
/*! Cooltipz.css v:version | MIT License | github.com/jackdomleo7/Cooltipz.css */
We appreciate any feedback, good or bad and are always looking for new ideas to improve the user experience (UX), developer experience (DX) and accessibility of the tooltips. You may want to consider:
git clone https://github.com/jackdomleo7/Cooltipz.css.git
or clone your forked repositorycd Cooltipz.css
npm ci
npm run build
to compile development SCSS to CSS