Moder Pure CSS Tooltip Library – Cooltipz.css

Category: CSS & CSS3 , Recommended , Tooltip | August 6, 2023
Author:JDomleo
Views Total:84 views
Official Page:Go to website
Last Update:August 6, 2023
License:MIT

Preview:

Moder Pure CSS Tooltip Library – Cooltipz.css

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

You Might Be Interested In:


Leave a Reply