Cooltipz.css

Getting started

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.

Usage

CDN

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
  • cooltipz.css (Expanded stylesheet)
  • cooltipz.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:

• src/cooltipz (.scss file)
• cooltipz.css (Expanded .css)
• cooltipz.min.css (Minified .css)

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