A Modern, Simple, and Clean Pure CSS Tooltip Library | Cooltipz.css

Pure-CSS-Tooltip-Library

Pure CSS Tooltip Library – Cooltipz.css is a pure, lightweight, modern, accessible, customizable, and easy-to-use CSS hints library.

It automatically disables animation if the user prefers reduced animation.

Features

  • Easy and simple tooltips with quick setup
  • Pure CSS, no JavaScript
  • Highly customizable
  • Accessible with aria-label attributes
  • Automatically disables animation if the user prefers a 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

How to make use of 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 within the aria-label attribute and decide the path of the tooltip.

<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 at all times seen.

<!-- 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-text-color: #fff;
  --cooltipz-font-size: 0.75rem;
  --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-delay-show: 0s;
  --cooltipz-delay-hide: 0s;
}

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

<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 within 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>

Moder Pure CSS Tooltip Library, Cool tooltips Plugin/Github


See Demo And Download

Official Website(jackdomleo7): Click Here

This superior jQuery/javascript plugin is developed by jackdomleo7. For extra Advanced Usage, please go to the official website.

Share