Cooltipz.css

Getting started Link to section

To get started using Cooltipz.css in your project, all you need to do is:

1. Install cooltipz-css via CDN, npm or yarn
2. Add an aria-label and a direction to any non self-closing HTML tag
3. (Optional) Add any modifiers and/or customise your own tooltip

Depending on your preference, you can choose to use classes or data- attributes.

Choose Your Version

Cooltipz.css is available in three optimized versions to suit different development preferences:

Combined Version (40KB minified)

Full-featured version supporting both class and data attribute approaches. Choose this if you need maximum flexibility or are unsure which approach to use.

Data Attributes Only (24KB minified)

Lightweight version using data-cooltipz-* attributes. Choose this if you prefer HTML-first styling and cleaner markup.

Classes Only (24KB minified)

Lightweight version using CSS classes like cooltipz--top. Choose this if you prefer traditional CSS class-based styling.

💡 Performance tip: The specialized versions are ~40% smaller, improving load times and reducing bandwidth usage.

Usage Link to section

CDN

Cooltipz.css is available in three versions:

• Combined - Full version supporting both data attributes and classes
• Data attributes only - Lighter version (~40% smaller) for data-attribute usage only
• Classes only - Lighter version (~40% smaller) for class-based usage only

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):
    • cooltipz.css (Expanded stylesheet)
    • cooltipz.min.css (Minified stylesheet)
  • Data attributes only (smaller bundle):
    • cooltipz-data-attrs.css (Expanded stylesheet)
    • cooltipz-data-attrs.min.css (Minified stylesheet)
  • Classes only (smaller bundle):
    • cooltipz-classes.css (Expanded stylesheet)
    • cooltipz-classes.min.css (Minified stylesheet)
• Then import via HTML or CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/cooltipz-css@:version/:file" />

@import url('https://cdn.jsdelivr.net/npm/cooltipz-css@:version/:file');

Package manager (npm or yarn)

npm downloads

npm install cooltipz-css --save

yarn add cooltipz-css

import 'cooltipz-css';

Or, import the SCSS or CSS into your Sass/SCSS

In the below imports, 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 */
@import '~cooltipz-css/:file';

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

No animation

<button aria-label="Tooltip message" data-cooltipz-dir="top" data-cooltipz-static>...</button>
<!-- OR -->
<button aria-label="Tooltip message" class="cooltipz--top cooltipz--static">...</button>

:root {
  --cooltipz-timing: 0;
}

Animation is automatically disabled if the user's preferences are set to prefers reduced motion.

Always visible

<button aria-label="Tooltip message" data-cooltipz-dir="top" data-cooltipz-visible>...</button>
<!-- OR -->
<button aria-label="Tooltip message" class="cooltipz--top cooltipz--visible">...</button>

This can also be useful if you need to programmatically show a tooltip.

Special characters

Not a problem.

<button aria-label="&copy; &reg; &#9742; &#9850; &#8709; 😎🚗🍔💩👏✔❤ ਸਤ ਸ੍ਰੀ ਅਕਾਲ" data-cooltipz-dir="top" data-cooltipz-visible>...</button>

Font Awesome

A little setup is required to use Font Awesome's unicode values in the tooltip's aria-label attribute.

You will need to set a value for the --cooltipz-fontawesome custom property.

<button aria-label="&#xf03e; &#xf200; &#xf188; &#xf007;" data-cooltipz-dir="top">...</button>

Font Awesome 4

:root {
  --cooltipz-fontawesome: FontAwesome;
}

Font Awesome 5

:root {
  --cooltipz-fontawesome: "Font Awesome 5 Free";
}

Customisation

There are 19 custom properties for you to customise your own tooltips.

:root {
  --cooltipz-bg-color: #ffffff;
  --cooltipz-text-color: #000000;
  --cooltipz-font-size: 1.2rem;
}

.custom {
  --cooltipz-arrow-size: 1.5rem;
  --cooltipz-cursor: help;
  --cooltipz-timing: 0;
}

See our CodePen for lots of examples of customisation:

See the Pen Cooltipz.css - Cool tooltips made from pure CSS by Jack Domleo (@jackdomleo7) on CodePen.

Drawbacks

Important: Cooltipz.css uses the ::before and ::after psuedo elements to display the tooltips, so be cautious of the following:

• Tooltips will not work on self-closing HTML elements because they don't have a ::before and ::after psuedo element.
• If the HTML element already has existing ::before or ::after styling, these could conflict with the Cooltipz.css styles and cause unexpected outputs.

License

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

Cooltipz.css is FREE for personal and commercial use.