Moder Pure CSS Tooltip Library – Cooltipz.css

Preview:

Description:

Cooltipz.css is a lightweight, accessible, CSS-only, configurable tooltip library for modern web UI/UX design.

How to use it:

1. Install & download the Cooltipz.css.

# NPM
$ npm install cooltipz-css --save

2. Import the Cooltipz.css.

import 'cooltipz-css';
// or
@import '~cooltipz-css/src/cooltipz';

3. Or include the ‘cooltipz.min.css’ stylesheet on the webpage.

<link href="cooltipz.min.css" rel="stylesheet" />

4. Define the tooltip content in the aria-label attribute and determine the direction of the tooltip (top, bottom, right, left, bottom-left, top-left, top-right, bottom-right). That’s it.

<button aria-label="Tooltip Content"
        data-cooltipz-dir="bottom">
        Hover Me
</button>

<!-- OR -->
<button aria-label="Tooltip Content"
        class="cooltipz--bottom">
        Hover Me
</button>

5. Disable the show/hide animations.

<!-- OR -->
<button aria-label="Tooltip Content"
        data-cooltipz-dir="bottom"
        data-cooltipz-static>
        Hover Me
</button>
<!-- OR -->
<button aria-label="Tooltip Content"
        class="cooltipz--bottom cooltipz--static">
        Hover Me
</button>

6. Make the tooltip always visible.

<!-- OR -->
<button aria-label="Tooltip Content"
        data-cooltipz-dir="bottom"
        data-cooltipz-visible>
        Hover Me
</button>
<!-- OR -->
<button aria-label="Tooltip Content"
        class="cooltipz--bottom cooltipz--visible">
        Hover Me
</button>

7. Override the default styles of the tooltip.

:root {
  --cooltipz-bg-color: #1f1f1f;
  --cooltipz-border-width: 0;
  --cooltipz-border-style: solid;
  --cooltipz-border-color: #1f1f1f;
  --cooltipz-text-color: #fff;
  --cooltipz-font-size: 0.75rem;
  --cooltipz-font-family: verdana, geneva, tahoma, var(--cooltipz-fontawesome, Arial), sans-serif;
  --cooltipz-slide: 6px;
  --cooltipz-border-radius: 0.125rem;
  --cooltipz-timing: 120ms;
  --cooltipz-cursor: pointer;
  --cooltipz-small: 6.25rem;
  --cooltipz-medium: 12.5rem;
  --cooltipz-large: 18.75rem;
  --cooltipz-arrow-size: 0.3125rem;
  --cooltipz-arrow-offset: 0px;
  --cooltipz-delay-show: 0s;
  --cooltipz-delay-hide: 0s;
}

8. Set the tooltip size: fit, small, medium, large.

<button aria-label="Tooltip Content" 
        data-cooltipz-dir="bottom" 
        data-cooltipz-size="fit"> 
        Hover Me
</button>
<button aria-label="Tooltip Content" 
        data-cooltipz-dir="bottom" 
        data-cooltipz-size="large"> 
        Hover Me
</button>

9. Display Font Awesome icons in the tooltips:

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

<button data-cooltipz-dir="top" aria-label="Font Awesome: &#xf03e; &#xf200; &#xf188; &#xf007;">
  Hover Me
</button>

Changelog:

v2.3.0 (08/06/2023)

• Arrow offset customization
• Update dependencies

v2.2.2 (03/25/2023)

• Bugfix

v2.2.1 (02/15/2023)

• Bugfix

v2.2.0 (01/22/2023)

• Ability to have custom size tooltips based on newline attributes
• Bug fixes

v2.1.1 (10/22/2022)

• Bugfix

v2.1.0 (11/11/2022)

• New option to customise the font-family
• New option to customise the attribute the tooltip is bound to (via Sass only)
• A tooltip is not shown if the attribute is empty (i.e. aria-label=””)
• Bug fix:

v2.0.0 (11/11/2021)

• New option to customise the font-family
• New option to customise the attribute the tooltip is bound to (via Sass only)
• A tooltip is not shown if the attribute is empty (i.e. aria-label=””)
• Bug fix

v2.0.0 (11/06/2021)

• Made sass an optional peer dependency

v1.7.1 (09/23/2021)

• Upgrade to using npm7 and lockfile v2

v1.7.0 (09/23/2021)

• Customisable tooltip border with new customisable variables

v1.6.8 (07/11/2021)

• Update dependencies
• Replace node-sass with sass

v1.6.7 (02/05/2021)

• package updated

v1.6.6 (10/01/2020)

• package updated

v1.6.5 (08/17/2020)

• Update autoprefixer dependency
• Refactor CSS selectors resulting in a reduced file size for the output CSS

v1.6.4 (07/08/2020)

• Maintenance

v1.6.2 (06/25/2020)

• Fixed a bug where if the cooltipz– class was NOT the first class on an element, the tooltip would not show. This is now resolved.
• Dependency updates.

v1.6.1 (05/18/2020)

• Updated dependencies and devDependencies (autoprefixer, stylelint, stylelint-scss, node-sass)
• General maintenance

v1.6.0 (05/01/2020)

• Customisable arrow size
• Customisable delay of showing/hiding tooltips
• Added support for Font Awesome icons
• Better browser support by implementing browserslist
• Bug fix Shadow on tooltip arrow

v1.5.0 (04/29/2020)

• Added new variables
• Bugs fixed

v1.4.2 (04/29/2020)

• Fixed bug where v.1.4.1 expanded and minified stylesheets were prepended with v1.4.0 rather than v1.4.1

v1.4.1 (04/27/2020)

• Updated node-sass devDependency from v4.13.1 to v4.14.0
• Improved documentation on importing CSS and Sass/SCSS via npm
• Improved tooltip content font-smoothing (useful for emojis, icons and glyphs)

v1.4.0 (04/23/2020)

• Allows to adjust the tooltip size
• Bugs fixed