2.1.0 • Public • Published


    Buy Me A Coffee Cooltipz.css - A modern, customisable, accessible pure CSS tooltip library. | Product Hunt


    Maintenance MIT License Brotli size

    GitHub stars GitHub release (latest by date) npm jsDelivr hits (npm)

    Cooltipz.css - Cool tooltips

    Cool customisable tooltips made from pure CSS

    Lightweight • Accessible • Customisable • Simple

    Cooltipz.css is a pure CSS tooltip library that is lightweight, modern, accessible, customisable and easy to use.

    Official documentation:

    Play with Cooltipz.css on CodePen.


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


    Cooltipz.css examples



    In the below CDN links:

    • Replace :version with a version listed here (latest version is always recommended). If you always want to get the latest stylesheet, remove @:version completely (Not recommended).
    • Replace :file with one of the below:
      • cooltipz.css (Expanded stylesheet)
      • cooltipz.min.css (Minfied stylesheet)
    <!-- HTML -->
    <link rel="stylesheet" href="" />
    /* Or CSS */
    @import url('');

    Package manager (npm or yarn)

    It's best practice to install Cooltipz.css as a dependency rather than a dev dependency. You can install cooltipz-css via npm or yarn.

    First install via npm

    npm install cooltipz-css --save

    Or install via yarn

    yarn add cooltipz-css

    Then import into your JavaScript

    import 'cooltipz-css';

    Or use the SCSS or CSS into your Sass/SCSS In the below example, replace :file with one of the options below:

    • src/cooltipz (.scss file)
    • cooltipz.css (Expanded .css)
    • cooltipz.min.css (Minified .css)
    /* Webpack */
    @use '~cooltipz-css/:file' as *;
    /* Non-webpack */
    @use 'path/to/node_modules/cooltipz-css/:file' as *;


    Type - MIT

    Read license

    You have the right to use this library in any project FREE of charge for personal and commercial use.

    Commercial use should consider a small donation on Buy Me a Coffee.

    You do not have the right to resell, sublicense or redistribute (even for free) this library.

    Cooltipz.css is licensed under MIT. As a minimum, you are required to KEEP AND NOT REMOVE the following code at the beginning of your downloaded/installed Cooltipz.css CSS, where :version is replaced with the version number you are using:

    /*! Cooltipz.css v:version | MIT License | */

    Feedback and support

    We appreciate any feedback, good or bad and are always looking for new ideas to improve the user experience (UX), developer experience (DX) and accessibility of the tooltips. You may want to consider:



    • Fork this repository if required
    • git clone or clone your forked repository
    • cd Cooltipz.css
    • npm ci
    • npm run build to compile development SCSS to CSS


    • All branches should be prefixed with the issue number
    • All branches must have a descriptive name


    Tip: Click on a version number to view a previous version's package page

    Current Tags

    • Version
      Downloads (Last 7 Days)
      • Tag
    • 2.1.0
      • latest

    Version History


    npm i cooltipz-css

    DownloadsWeekly Downloads






    Unpacked Size

    104 kB

    Total Files


    Last publish


    • jackdomleo7