JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 425
  • Score
    100M100P100Q93691F
  • License MIT

Cooltipz.css is a pure CSS tooltip library that is lightweight, modern, accessible, customisable and easy to use

Package Exports

  • cooltipz-css
  • cooltipz-css/cooltipz.min.css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cooltipz-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Cooltipz.css

Pipeline

MIT License Brotli size

GitHub stars GitHub release (latest by date) npm jsDelivr hits (npm)

Cooltipz.css - Cool tooltips

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

  • Easy and simple tooltips with quick setup
  • Pure CSS, no JavaScript
  • Highly customisable
  • Multiple versions available - Combined, data attributes only, or classes only for optimal bundle size
  • Internationalisation support - Full RTL language support and modern CSS logical properties for global accessibility
  • Accessible with aria-label attributes
  • Automatically disables animation if the user prefers reduced motion
  • Options to use classes or data- attributes
  • Options to import via CDN, npm or yarn
  • Options to import SCSS (npm & yarn only) or CSS stylesheets (expanded or minified)
  • Supports a wide range of characters and languages (including emojis, Font Awesome 4 and Font Awesome 5 icons)
  • Uses Autoprefixer when generating the CSS stylesheets and cssnano to minify the minified stylesheet

Examples

Cooltipz.css examples

Usage

CDN

Cooltipz.css is available in three versions:

  • Combined (cooltipz.css/cooltipz.min.css) - Full version supporting both data attributes and classes
  • Data attributes only (cooltipz-data-attrs.css/cooltipz-data-attrs.min.css) - Lighter version for data-attribute usage only
  • Classes only (cooltipz-classes.css/cooltipz-classes.min.css) - Lighter version for class-based usage only

Choose the version that best fits your needs to minimize bundle size.

In the below CDN links:

  • Replace :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).

  • Replace :file with one of the below:

    Combined (full functionality - 3.13kB when compressed):

    • cooltipz.css (Expanded stylesheet)
    • cooltipz.min.css (Minified stylesheet)

    Data attributes only (smaller bundle - 1.88kB when compressed):

    • cooltipz-data-attrs.css (Expanded stylesheet)
    • cooltipz-data-attrs.min.css (Minified stylesheet)

    Classes only (smaller bundle - 1.85kB when compressed):

    • cooltipz-classes.css (Expanded stylesheet)
    • cooltipz-classes.min.css (Minified 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');

Package manager (npm or yarn)

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:

SCSS source files:

  • src/cooltipz (.scss file - combined version)
  • src/cooltipz-data-attrs (.scss file - data attributes only)
  • src/cooltipz-classes (.scss file - classes only)

Compiled CSS files:

  • cooltipz.css (Expanded .css - combined version)
  • cooltipz.min.css (Minified .css - combined version)
  • cooltipz-data-attrs.css (Expanded .css - data attributes only)
  • cooltipz-data-attrs.min.css (Minified .css - data attributes only)
  • cooltipz-classes.css (Expanded .css - classes only)
  • cooltipz-classes.min.css (Minified .css - classes only)
/* Webpack */
@use '~cooltipz-css/:file' as *;

/* Non-webpack */
@use 'path/to/node_modules/cooltipz-css/:file' as *;

Choosing the Right Version

Cooltipz.css offers three different versions to help you optimize your bundle size:

🎯 Combined Version (Default)

  • Files: cooltipz.css, cooltipz.min.css, src/cooltipz.scss
  • Use when: You want to use both data attributes and classes in your project
  • Supports: Both data-cooltipz="tooltip text" and aria-label="tooltip text" with classes like .cooltipz--top
  • Size: Full feature set

📊 Data Attributes Only

  • Files: cooltipz-data-attrs.css, cooltipz-data-attrs.min.css, src/cooltipz-data-attrs.scss
  • Use when: You only use data attributes like data-cooltipz="tooltip text" and data-cooltipz-dir="top"
  • Supports: Only data attribute syntax
  • Size: ~40% smaller than combined version
  • Example: <button data-cooltipz="Save file" data-cooltipz-dir="top">Save</button>

🎨 Classes Only

  • Files: cooltipz-classes.css, cooltipz-classes.min.css, src/cooltipz-classes.scss
  • Use when: You prefer semantic CSS classes with aria-label attributes
  • Supports: Only class-based syntax with aria-label
  • Size: ~40% smaller than combined version
  • Example: <button aria-label="Save file" class="cooltipz--top">Save</button>

💡 Recommendation: Start with the data attributes only version if you're unsure, as it provides the most intuitive API. You can always switch to the combined version later if needed.

License

Type - MIT

Read license

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 */

Feedback and support

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:

Development

Setup

  • Fork this repository if required
  • git clone https://github.com/jackdomleo7/Cooltipz.css.git or clone your forked repository
  • cd Cooltipz.css
  • npm ci
  • npm run build to compile all versions (combined, data-attrs, and classes) from SCSS to CSS

Build commands:

  • npm run build - Build all three versions
  • npm run build:combined - Build only the combined version (default)
  • npm run build:data-attrs - Build only the data attributes version
  • npm run build:classes - Build only the classes version

Branch

  • All branches should be prefixed with the issue number
  • All branches must have a descriptive name

GitHub • npm • yarn • docs • CHANGELOG • License