Cooltipz.css is a lightweight, modern, accessible, customizable, and easy-to-use pure CSS hint library for modern web UI/UX design.

css tooltip with arrow, css tooltip on hover, tooltip css codepen, custom tooltip css, tooltip animation, css tooltip animation, css tooltip generator, tooltip with close button css

Features:

• Simple and easy tool tips with quick setup
• Pure CSS, without JavaScript
• Highly customizable
• It can be accessed with naming attributes
• Automatically disables animations if the user prefers low motion
• Options for using categories or data attributes
• Options to import via CDN, npm or Yarn
• Options to import SCSS (npm & yarn only) or CSS stylesheets (extended or minified)
• Supports a wide range of characters and languages ​​(including emojis, Font Awesome 4 and Font Awesome 5 icons)
• Autoprefixer is used when creating CSS and cssnano style sheets to minify the thumbnail stylesheet

How to make use of it:

1. Install and download Cooltipz.css.

# NPM
$ npm install cooltipz-css --save

2. Import the Cooltipz.css file.

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. Specify the content of the tool tip in the aria-label attribute and specify the direction of the tool tip.

<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 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. Always make the tool tip 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 default styles for tool tip.

: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-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, 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 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, Cooltipz.css 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.