Author: | JDomleo |
---|---|
Views Total: | 84 views |
Official Page: | Go to website |
Last Update: | August 6, 2023 |
License: | MIT |
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:    "> 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