Repository: chinchang/hint.css Branch: master Commit: e9281cf24369 Files: 26 Total size: 54.7 KB Directory structure: gitextract_qipwe67b/ ├── .editorconfig ├── .github/ │ └── FUNDING.yml ├── .gitignore ├── .prettierignore ├── CONTRIBUTING.md ├── Gruntfile.js ├── LICENSE ├── README.md ├── bower.json ├── component.json ├── demo.html ├── hint.base.css ├── hint.css ├── package.json └── src/ ├── hint-always.scss ├── hint-color-types.scss ├── hint-core.scss ├── hint-effects.scss ├── hint-mixins.scss ├── hint-position.scss ├── hint-rounded.scss ├── hint-sizes.scss ├── hint-theme.scss ├── hint-variables.scss ├── hint.base.scss └── hint.scss ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ # editorconfig.org root = true [*] charset = utf-8 end_of_line = lf indent_style = tab insert_final_newline = true trim_trailing_whitespace = true ================================================ FILE: .github/FUNDING.yml ================================================ # These are supported funding model platforms patreon: kushagra custom: https://paypal.me/kushagragour ================================================ FILE: .gitignore ================================================ .sass-cache node_modules/ hint.sublime-project hint.sublime-workspace *.map ================================================ FILE: .prettierignore ================================================ hint.css hint.min.css hint.base.css hint.base.min.css ================================================ FILE: CONTRIBUTING.md ================================================ **Hint** is written in [SASS](http://sass-lang.com/). # Setup 1. [Fork **Hint.css**](https://help.github.com/articles/fork-a-repo) and clone it on your system. 2. Create a new branch out off `master` for your fix/feature. `git checkout new-feature master` # Building **Hint.css** uses [Grunt](http://gruntjs.com/) for the build process which you need to have installed on your system. Also there are four additional Grunt tasks required to build the library: 1. [grunt-contrib-cssmin](https://npmjs.org/package/grunt-contrib-cssmin) 2. [grunt-sass](https://www.npmjs.com/package/grunt-sass) 3. [grunt-contrib-concat](https://www.npmjs.com/package/grunt-contrib-concat) 4. [grunt-contrib-watch](https://www.npmjs.com/package/grunt-contrib-watch) To install all the dependencies, run `npm install`. Once you have the dependencies installed, run `npm run dev` from the project directory. This will start watching all the files in `src/` and run the default grunt task which compiles the SCSS files into `hint.css` file. You can then test your changes in `demo.html`. Though this should be sufficient for building the library for testing, in case you want to build the minified version as well you can run the `grunt deploy` command instead. # Things to remember - Do not fix multiple issues in a single commit. Keep them one thing per commit so that they can be picked easily incase only few commits require to be merged. - For every new modifier (example `hint--success`, `hint--top`) added, make a separate file unless it fits into a current modifier file. - Before submitting a patch, rebase your branch on upstream `master` to make life easier for the merger. - **DO NOT** add the library builds (`hint.css` & `hint.min.css`) in your commits. # Stay in touch Best place to get in touch regarding this library is the [issues board on Github](https://github.com/chinchang/hint.css/issues). ================================================ FILE: Gruntfile.js ================================================ /*global module:false*/ const sass = require("sass"); module.exports = function (grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON("package.json"), meta: { getBanner: function () { return "/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - <%= meta.banner %>"; }, getBannerForBaseVersion: function () { return "/*! <%= pkg.title || pkg.name %> (base version) - v<%= pkg.version %> - <%= meta.banner %>"; }, banner: '<%= grunt.template.today("yyyy-mm-dd") + "\\n" %>' + '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %> */\n\n', }, sass: { options: { implementation: sass, sourceMap: false, }, dist: { files: { "<%= pkg.name %>.css": "src/<%= pkg.name %>.scss", "<%= pkg.name %>.base.css": "src/<%= pkg.name %>.base.scss", }, }, }, cssmin: { options: { sourceMap: false, }, compress: { files: { "<%= pkg.name %>.min.css": ["<%= pkg.name %>.css"], "<%= pkg.name %>.base.min.css": ["<%= pkg.name %>.base.css"], }, }, }, // concat banner to final lib files concat: { options: { banner: "<%= meta.getBanner() %>", }, lib: { src: ["<%= pkg.name %>.css"], dest: "<%= pkg.name %>.css", }, minLib: { src: ["<%= pkg.name %>.min.css"], dest: "<%= pkg.name %>.min.css", }, baseLib: { options: { banner: "<%= meta.getBannerForBaseVersion() %>", }, src: ["<%= pkg.name %>.base.css"], dest: "<%= pkg.name %>.base.css", }, baseMinLib: { options: { banner: "<%= meta.getBannerForBaseVersion() %>", }, src: ["<%= pkg.name %>.base.min.css"], dest: "<%= pkg.name %>.base.min.css", }, }, watch: { files: "src/*.scss", tasks: "default", }, }); // Dependencies grunt.loadNpmTasks("grunt-sass"); grunt.loadNpmTasks("grunt-contrib-cssmin"); grunt.loadNpmTasks("grunt-contrib-concat"); grunt.loadNpmTasks("grunt-contrib-watch"); // Default task. grunt.registerTask("default", "sass"); grunt.registerTask("deploy", ["sass", "cssmin", "concat"]); }; ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2021 Kushagra Gour Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # Hint.css [![npm version](https://badge.fury.io/js/hint.css.svg)](https://badge.fury.io/js/hint.css) ![downloads/month](https://img.shields.io/npm/dm/hint.css.svg) [![Join the chat at https://gitter.im/chinchang/hint.css](https://badges.gitter.im/chinchang/hint.css.svg)](https://gitter.im/chinchang/hint.css?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) ![gzip size](http://img.badgesize.io/https://unpkg.com/hint.css/hint.min.css?compression=gzip&label=gzip%20size) _A tooltip library in CSS for your lovely websites_ [Demo](https://kushagra.dev/lab/hint/) • [Get started](#get-started) • [Who's using this?](#whos-using-this) • [Browser support](#browser-support) • [FAQs](#faqs) • [Contributing](#contributing) • [License](#license) `hint.css` is written as a pure CSS resource using which you can create cool accessible tooltips for your web app. It does not rely on JavaScript but rather uses **aria-label**/**data-\* attribute**, **pseudo elements**, **content property** and **CSS3 transitions** to create the tooltips. Also it uses **BEM** naming convention particularly for the modifiers. ## Get Started Get the library using one of the following ways: 1. **GitHub** Full build - [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.css - [minified] : https://raw.github.com/chinchang/hint.css/master/hint.min.css Base build _(Does not include color themes and fancy effects)_ - [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.base.css - [minified] : https://raw.github.com/chinchang/hint.css/master/hint.base.min.css 2. **Bower** : `bower install hint.css` 3. **npm**: `npm install --save hint.css` 4. **CDN**: [https://www.jsdelivr.com/package/npm/hint.css](https://www.jsdelivr.com/package/npm/hint.css) or [https://cdnjs.com/libraries/hint.css](https://cdnjs.com/libraries/hint.css) Now include the library in the `HEAD` tag of your page: ```html ``` or ```html ``` Now, all you need to do is give your element any position class and tooltip text using the `aria-label` attribute. Note, if you don't want to use `aria-label` attribute, you can also specify the tooltip text using the `data-hint` attribute, but its recommended to use `aria-label` in support of accessibility. [Read more about aria-label](https://webaccessibility.withgoogle.com/unit?unit=6&lesson=10). ```html Hello Sir, hover me. ``` Use it with other available modifiers in various combinations. Available modifiers: - _Colors_ - `hint--error`, `hint--info`, `hint--warning`, `hint--success` - _Sizes_ - `hint--small`, `hint--medium`, `hint--large`, `hint--fit` - `hint--always` - `hint--rounded` - `hint--no-animate` - `hint--bounce` - `hint--no-arrow` - `hint--no-shadow` ## Upgrading from v1.x If you are already using v1.x, you may need to tweak certain position classes because of the way tooltips are positioned in v2. ## Changing the prefix for class names Don't like BEM naming (`hint--`) or want to use your own prefix for the class names? Simply update `src/hint-variables.scss` and change the `$hintPrefix` variable. To generate the css file, please read the [contributing page](./CONTRIBUTING.md). ## Who's Using This? - [Webflow Playground](http://playground.webflow.com/) - [Panda chrome app](http://usepanda.com/) - [Fiverr](https://www.fiverr.com/) - [Stackshare](http://stackshare.io/) - [Siftery](https://siftery.com/) - [LessPass](https://lesspass.com/#/) - [Tridiv](http://tridiv.com/) - [Alm - TypeScript IDE](http://alm.tools/) - [Prototyp](http://prototyp.in/) - [Tradus](http://tradus.com/) - [Web Maker](https://webmakerapp.com) - [Tolks](https://tolks.io) - [Formspree](http://formspree.io/) - [codeMagic](http://codemagic.gr/) Are you using **hint.css** in your awesome project too? Just tweet it out to [@hint_css](https://twitter.com/hint_css) or let us know on the [mailing list](mailto:hintcss@googlegroups.com). ## Browser Support **hint.css** works on all latest browsers ### FAQs Checkout the [FAQ Wiki](https://github.com/chinchang/hint.css/wiki/Frequently-Asked-Questions) for some common gotchas to be aware of while using **hint.css**. ## Contributing `hint.css` is developed in SASS and the source files can be found in the `src/` directory. If you would like to create more types of tooltips/ fix bugs/ enhance the library etc. you are more than welcome to submit your pull requests. [Read more on contributing](./CONTRIBUTING.md). ## Changelog & Updates See the [Changelog](https://github.com/chinchang/hint.css/wiki/Changelog). To catch all updates and discussion, join the mailing list: [**hintcss@googlegroups.com**](https://groups.google.com/forum/?fromgroups=#!forum/hintcss). Or follow on twitter: [**@hint_css**](https://twitter.com/hint_css) ## License Hint.css is free for personal and commercial use under the MIT License. ## Credits This doesn't make use of a lot of BEM methodology but big thanks to [@csswizardry](https://twitter.com/csswizardry), [@necolas](https://twitter.com/necolas) for their awesome articles on BEM and to [@joshnh](https://twitter.com/_joshnh) through whose work I came to know about it :) # Sponsor [![](https://user-images.githubusercontent.com/379918/134402085-15cf29bc-2266-4b2d-9354-1830adc4a240.png)](https://cssbattle.dev?utm_source=hintcssrepo) ================================================ FILE: bower.json ================================================ { "name": "hint.css", "main": "hint.min.css", "author": "Kushagra Gour", "ignore": [ "CONTRIBUTING.md", "Gruntfile.js" ], "keywords": [ "hint", "tooltip", "tooltips", "ui" ] } ================================================ FILE: component.json ================================================ { "name": "hint.css", "repo": "chinchang/hint.css", "description": "A tooltip library in CSS for your lovely websites.", "version": "2.6.0", "keywords": ["tooltip", "css"], "dependencies": {}, "development": {}, "styles": [ "hint.min.css" ] } ================================================ FILE: demo.html ================================================ Hint.css - A tooltip library in CSS

Hint.css 3.0

A pure CSS tooltip library for your lovely websites


Tryout

Try hovering over different things
bottom-right
bottom
bottom-left
right
.
left
top-right
top
top-left

Color Modifiers

Size variations

Small Medium Large Fit

Extra

Hmm...So you don't like sharp edges?

You can also make tooltips...

You can omit the arrow too.

Effects

Dont like animation?

Adding a hint--bounce class gives you that...

Maybe you do not want shadows.

Upgrading from v1.x: If you are already using v1.x, you may need to tweak certain position classes because of the way tooltips are positioned in v2.
Its recommended to use aria-label attribute to specify your tooltip text in support of accessibility. Though, you can always use data-hint attribute instead. Read more about aria-label here.
Made with hands by Kushagra Gour in India
================================================ FILE: hint.base.css ================================================ /*! Hint.css (base version) - v3.0.0 - 2023-11-29 * https://kushagra.dev/lab/hint/ * Copyright (c) 2023 Kushagra Gour */ /*-------------------------------------*\ HINT.css - A CSS tooltip library \*-------------------------------------*/ /** * HINT.css is a tooltip library made in pure CSS. * * Source: https://github.com/chinchang/hint.css * Demo: http://kushagragour.in/lab/hint/ * */ /** * source: hint-core.scss * * Defines the basic styling for the tooltip. * Each tooltip is made of 2 parts: * 1) body (:after) * 2) arrow (:before) * * Classes added: * 1) hint */ [class*=hint--] { position: relative; display: inline-block; /** * tooltip arrow */ /** * tooltip body */ } [class*=hint--]:before, [class*=hint--]:after { position: absolute; transform: translate3d(0, 0, 0); visibility: hidden; opacity: 0; z-index: 1000000; pointer-events: none; transition: 0.3s ease; transition-delay: 0ms; } [class*=hint--]:hover:before, [class*=hint--]:hover:after { visibility: visible; opacity: 1; } [class*=hint--]:hover:before, [class*=hint--]:hover:after { transition-delay: 100ms; } [class*=hint--]:before { content: ""; position: absolute; background: transparent; border: 6px solid transparent; background-color: hsl(0, 0%, 22%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%); z-index: 1000001; } [class*=hint--]:after { background: hsl(0, 0%, 22%); color: white; padding: 8px 10px; font-size: 1rem; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1rem; white-space: nowrap; } [class*=hint--][aria-label]:after { content: attr(aria-label); } [class*=hint--][data-hint]:after { content: attr(data-hint); } [aria-label=""]:before, [aria-label=""]:after, [data-hint=""]:before, [data-hint=""]:after { display: none !important; } /** * source: hint-position.scss * * Defines the positoning logic for the tooltips. * * Classes added: * 1) hint--top * 2) hint--bottom * 3) hint--left * 4) hint--right */ /** * top tooltip */ .hint--top { --rotation: 135deg; } .hint--top:before { margin-bottom: -5.5px; transform: rotate(var(--rotation)); } .hint--top:before, .hint--top:after { bottom: 100%; left: 50%; } .hint--top:before { left: calc(50% - 6px); } .hint--top:after { transform: translateX(-50%); } .hint--top:hover:before { transform: translateY(-8px) rotate(var(--rotation)); } .hint--top:hover:after { transform: translateX(-50%) translateY(-8px); } /** * bottom tooltip */ .hint--bottom { --rotation: -45deg; } .hint--bottom:before { margin-top: -5.5px; transform: rotate(var(--rotation)); } .hint--bottom:before, .hint--bottom:after { top: 100%; left: 50%; } .hint--bottom:before { left: calc(50% - 6px); } .hint--bottom:after { transform: translateX(-50%); } .hint--bottom:hover:before { transform: translateY(8px) rotate(var(--rotation)); } .hint--bottom:hover:after { transform: translateX(-50%) translateY(8px); } /** * right tooltip */ .hint--right { --rotation: -135deg; } .hint--right:before { margin-left: -5.5px; margin-bottom: -6px; transform: rotate(var(--rotation)); } .hint--right:after { margin-bottom: calc(-1 * (1rem + 16px) / 2); } .hint--right:before, .hint--right:after { left: 100%; bottom: 50%; } .hint--right:hover:before { transform: translateX(8px) rotate(var(--rotation)); } .hint--right:hover:after { transform: translateX(8px); } /** * left tooltip */ .hint--left { --rotation: 45deg; } .hint--left:before { margin-right: -5.5px; margin-bottom: -6px; transform: rotate(var(--rotation)); } .hint--left:after { margin-bottom: calc(-1 * (1rem + 16px) / 2); } .hint--left:before, .hint--left:after { right: 100%; bottom: 50%; } .hint--left:hover:before { transform: translateX(-8px) rotate(var(--rotation)); } .hint--left:hover:after { transform: translateX(-8px); } /** * top-left tooltip */ .hint--top-left { --rotation: 135deg; } .hint--top-left:before { margin-bottom: -5.5px; transform: rotate(var(--rotation)); } .hint--top-left:before, .hint--top-left:after { bottom: 100%; left: 50%; } .hint--top-left:before { left: calc(50% - 6px); } .hint--top-left:after { transform: translateX(-100%); } .hint--top-left:after { margin-left: 12px; } .hint--top-left:hover:before { transform: translateY(-8px) rotate(var(--rotation)); } .hint--top-left:hover:after { transform: translateX(-100%) translateY(-8px); } /** * top-right tooltip */ .hint--top-right { --rotation: 135deg; } .hint--top-right:before { margin-bottom: -5.5px; transform: rotate(var(--rotation)); } .hint--top-right:before, .hint--top-right:after { bottom: 100%; left: 50%; } .hint--top-right:before { left: calc(50% - 6px); } .hint--top-right:after { transform: translateX(0); } .hint--top-right:after { margin-left: -12px; } .hint--top-right:hover:before { transform: translateY(-8px) rotate(var(--rotation)); } .hint--top-right:hover:after { transform: translateY(-8px); } /** * bottom-left tooltip */ .hint--bottom-left { --rotation: -45deg; } .hint--bottom-left:before { margin-top: -5.5px; transform: rotate(var(--rotation)); } .hint--bottom-left:before, .hint--bottom-left:after { top: 100%; left: 50%; } .hint--bottom-left:before { left: calc(50% - 6px); } .hint--bottom-left:after { transform: translateX(-100%); } .hint--bottom-left:after { margin-left: 12px; } .hint--bottom-left:hover:before { transform: translateY(8px) rotate(var(--rotation)); } .hint--bottom-left:hover:after { transform: translateX(-100%) translateY(8px); } /** * bottom-right tooltip */ .hint--bottom-right { --rotation: -45deg; } .hint--bottom-right:before { margin-top: -5.5px; transform: rotate(var(--rotation)); } .hint--bottom-right:before, .hint--bottom-right:after { top: 100%; left: 50%; } .hint--bottom-right:before { left: calc(50% - 6px); } .hint--bottom-right:after { transform: translateX(0); } .hint--bottom-right:after { margin-left: -12px; } .hint--bottom-right:hover:before { transform: translateY(8px) rotate(var(--rotation)); } .hint--bottom-right:hover:after { transform: translateY(8px); } /** * source: hint-sizes.scss * * Defines width restricted tooltips that can span * across multiple lines. * * Classes added: * 1) hint--small * 2) hint--medium * 3) hint--large * 4) hint--fit * */ .hint--small:after, .hint--medium:after, .hint--large:after, .hint--fit:after { box-sizing: border-box; white-space: normal; line-height: 1.4em; word-wrap: break-word; } .hint--small:after { width: 80px; } .hint--medium:after { width: 150px; } .hint--large:after { width: 300px; } .hint--fit:after { width: 100%; } /** * source: hint-always.scss * * Defines a persisted tooltip which shows always. * * Classes added: * 1) hint--always * */ .hint--always:after, .hint--always:before { opacity: 1; visibility: visible; } .hint--always.hint--top:before { transform: translateY(-8px) rotate(var(--rotation)); } .hint--always.hint--top:after { transform: translateX(-50%) translateY(-8px); } .hint--always.hint--top-left:before { transform: translateY(-8px) rotate(var(--rotation)); } .hint--always.hint--top-left:after { transform: translateX(-100%) translateY(-8px); } .hint--always.hint--top-right:before { transform: translateY(-8px) rotate(var(--rotation)); } .hint--always.hint--top-right:after { transform: translateY(-8px); } .hint--always.hint--bottom:before { transform: translateY(8px) rotate(var(--rotation)); } .hint--always.hint--bottom:after { transform: translateX(-50%) translateY(8px); } .hint--always.hint--bottom-left:before { transform: translateY(8px) rotate(var(--rotation)); } .hint--always.hint--bottom-left:after { transform: translateX(-100%) translateY(8px); } .hint--always.hint--bottom-right:before { transform: translateY(8px) rotate(var(--rotation)); } .hint--always.hint--bottom-right:after { transform: translateY(8px); } .hint--always.hint--left:before { transform: translateX(-8px) rotate(var(--rotation)); } .hint--always.hint--left:after { transform: translateX(-8px); } .hint--always.hint--right:before { transform: translateX(8px) rotate(var(--rotation)); } .hint--always.hint--right:after { transform: translateX(8px); } ================================================ FILE: hint.css ================================================ /*! Hint.css - v3.0.0 - 2023-11-29 * https://kushagra.dev/lab/hint/ * Copyright (c) 2023 Kushagra Gour */ /*-------------------------------------*\ HINT.css - A CSS tooltip library \*-------------------------------------*/ /** * HINT.css is a tooltip library made in pure CSS. * * Source: https://github.com/chinchang/hint.css * Demo: http://kushagragour.in/lab/hint/ * */ /** * source: hint-core.scss * * Defines the basic styling for the tooltip. * Each tooltip is made of 2 parts: * 1) body (:after) * 2) arrow (:before) * * Classes added: * 1) hint */ [class*=hint--] { position: relative; display: inline-block; /** * tooltip arrow */ /** * tooltip body */ } [class*=hint--]:before, [class*=hint--]:after { position: absolute; transform: translate3d(0, 0, 0); visibility: hidden; opacity: 0; z-index: 1000000; pointer-events: none; transition: 0.3s ease; transition-delay: 0ms; } [class*=hint--]:hover:before, [class*=hint--]:hover:after { visibility: visible; opacity: 1; } [class*=hint--]:hover:before, [class*=hint--]:hover:after { transition-delay: 100ms; } [class*=hint--]:before { content: ""; position: absolute; background: transparent; border: 6px solid transparent; background-color: hsl(0, 0%, 22%); clip-path: polygon(0% 0%, 100% 0%, 100% 100%); z-index: 1000001; } [class*=hint--]:after { background: hsl(0, 0%, 22%); color: white; padding: 8px 10px; font-size: 1rem; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1rem; white-space: nowrap; } [class*=hint--][aria-label]:after { content: attr(aria-label); } [class*=hint--][data-hint]:after { content: attr(data-hint); } [aria-label=""]:before, [aria-label=""]:after, [data-hint=""]:before, [data-hint=""]:after { display: none !important; } /** * source: hint-position.scss * * Defines the positoning logic for the tooltips. * * Classes added: * 1) hint--top * 2) hint--bottom * 3) hint--left * 4) hint--right */ /** * top tooltip */ .hint--top { --rotation: 135deg; } .hint--top:before { margin-bottom: -5.5px; transform: rotate(var(--rotation)); } .hint--top:before, .hint--top:after { bottom: 100%; left: 50%; } .hint--top:before { left: calc(50% - 6px); } .hint--top:after { transform: translateX(-50%); } .hint--top:hover:before { transform: translateY(-8px) rotate(var(--rotation)); } .hint--top:hover:after { transform: translateX(-50%) translateY(-8px); } /** * bottom tooltip */ .hint--bottom { --rotation: -45deg; } .hint--bottom:before { margin-top: -5.5px; transform: rotate(var(--rotation)); } .hint--bottom:before, .hint--bottom:after { top: 100%; left: 50%; } .hint--bottom:before { left: calc(50% - 6px); } .hint--bottom:after { transform: translateX(-50%); } .hint--bottom:hover:before { transform: translateY(8px) rotate(var(--rotation)); } .hint--bottom:hover:after { transform: translateX(-50%) translateY(8px); } /** * right tooltip */ .hint--right { --rotation: -135deg; } .hint--right:before { margin-left: -5.5px; margin-bottom: -6px; transform: rotate(var(--rotation)); } .hint--right:after { margin-bottom: calc(-1 * (1rem + 16px) / 2); } .hint--right:before, .hint--right:after { left: 100%; bottom: 50%; } .hint--right:hover:before { transform: translateX(8px) rotate(var(--rotation)); } .hint--right:hover:after { transform: translateX(8px); } /** * left tooltip */ .hint--left { --rotation: 45deg; } .hint--left:before { margin-right: -5.5px; margin-bottom: -6px; transform: rotate(var(--rotation)); } .hint--left:after { margin-bottom: calc(-1 * (1rem + 16px) / 2); } .hint--left:before, .hint--left:after { right: 100%; bottom: 50%; } .hint--left:hover:before { transform: translateX(-8px) rotate(var(--rotation)); } .hint--left:hover:after { transform: translateX(-8px); } /** * top-left tooltip */ .hint--top-left { --rotation: 135deg; } .hint--top-left:before { margin-bottom: -5.5px; transform: rotate(var(--rotation)); } .hint--top-left:before, .hint--top-left:after { bottom: 100%; left: 50%; } .hint--top-left:before { left: calc(50% - 6px); } .hint--top-left:after { transform: translateX(-100%); } .hint--top-left:after { margin-left: 12px; } .hint--top-left:hover:before { transform: translateY(-8px) rotate(var(--rotation)); } .hint--top-left:hover:after { transform: translateX(-100%) translateY(-8px); } /** * top-right tooltip */ .hint--top-right { --rotation: 135deg; } .hint--top-right:before { margin-bottom: -5.5px; transform: rotate(var(--rotation)); } .hint--top-right:before, .hint--top-right:after { bottom: 100%; left: 50%; } .hint--top-right:before { left: calc(50% - 6px); } .hint--top-right:after { transform: translateX(0); } .hint--top-right:after { margin-left: -12px; } .hint--top-right:hover:before { transform: translateY(-8px) rotate(var(--rotation)); } .hint--top-right:hover:after { transform: translateY(-8px); } /** * bottom-left tooltip */ .hint--bottom-left { --rotation: -45deg; } .hint--bottom-left:before { margin-top: -5.5px; transform: rotate(var(--rotation)); } .hint--bottom-left:before, .hint--bottom-left:after { top: 100%; left: 50%; } .hint--bottom-left:before { left: calc(50% - 6px); } .hint--bottom-left:after { transform: translateX(-100%); } .hint--bottom-left:after { margin-left: 12px; } .hint--bottom-left:hover:before { transform: translateY(8px) rotate(var(--rotation)); } .hint--bottom-left:hover:after { transform: translateX(-100%) translateY(8px); } /** * bottom-right tooltip */ .hint--bottom-right { --rotation: -45deg; } .hint--bottom-right:before { margin-top: -5.5px; transform: rotate(var(--rotation)); } .hint--bottom-right:before, .hint--bottom-right:after { top: 100%; left: 50%; } .hint--bottom-right:before { left: calc(50% - 6px); } .hint--bottom-right:after { transform: translateX(0); } .hint--bottom-right:after { margin-left: -12px; } .hint--bottom-right:hover:before { transform: translateY(8px) rotate(var(--rotation)); } .hint--bottom-right:hover:after { transform: translateY(8px); } /** * source: hint-sizes.scss * * Defines width restricted tooltips that can span * across multiple lines. * * Classes added: * 1) hint--small * 2) hint--medium * 3) hint--large * 4) hint--fit * */ .hint--small:after, .hint--medium:after, .hint--large:after, .hint--fit:after { box-sizing: border-box; white-space: normal; line-height: 1.4em; word-wrap: break-word; } .hint--small:after { width: 80px; } .hint--medium:after { width: 150px; } .hint--large:after { width: 300px; } .hint--fit:after { width: 100%; } /** * source: hint-theme.scss * * Defines basic theme for tooltips. * */ [class*=hint--] { /** * tooltip body */ } [class*=hint--]:after { text-shadow: 0 1px 0px black; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); } /** * source: hint-color-types.scss * * Contains tooltips of various types based on color differences. * * Classes added: * 1) hint--error * 2) hint--warning * 3) hint--info * 4) hint--success * */ /** * Error */ .hint--error:after { background-color: hsl(1, 40%, 50%); text-shadow: 0 1px 0px #592726; } .hint--error:before { background-color: hsl(1, 40%, 50%); } /** * Warning */ .hint--warning:after { background-color: hsl(38, 46%, 54%); text-shadow: 0 1px 0px #6c5328; } .hint--warning:before { background-color: hsl(38, 46%, 54%); } /** * Info */ .hint--info:after { background-color: hsl(200, 50%, 45%); text-shadow: 0 1px 0px #1a3c4d; } .hint--info:before { background-color: hsl(200, 50%, 45%); } /** * Success */ .hint--success:after { background-color: hsl(121, 32%, 40%); text-shadow: 0 1px 0px #1a321a; } .hint--success:before { background-color: hsl(121, 32%, 40%); } /** * source: hint-always.scss * * Defines a persisted tooltip which shows always. * * Classes added: * 1) hint--always * */ .hint--always:after, .hint--always:before { opacity: 1; visibility: visible; } .hint--always.hint--top:before { transform: translateY(-8px) rotate(var(--rotation)); } .hint--always.hint--top:after { transform: translateX(-50%) translateY(-8px); } .hint--always.hint--top-left:before { transform: translateY(-8px) rotate(var(--rotation)); } .hint--always.hint--top-left:after { transform: translateX(-100%) translateY(-8px); } .hint--always.hint--top-right:before { transform: translateY(-8px) rotate(var(--rotation)); } .hint--always.hint--top-right:after { transform: translateY(-8px); } .hint--always.hint--bottom:before { transform: translateY(8px) rotate(var(--rotation)); } .hint--always.hint--bottom:after { transform: translateX(-50%) translateY(8px); } .hint--always.hint--bottom-left:before { transform: translateY(8px) rotate(var(--rotation)); } .hint--always.hint--bottom-left:after { transform: translateX(-100%) translateY(8px); } .hint--always.hint--bottom-right:before { transform: translateY(8px) rotate(var(--rotation)); } .hint--always.hint--bottom-right:after { transform: translateY(8px); } .hint--always.hint--left:before { transform: translateX(-8px) rotate(var(--rotation)); } .hint--always.hint--left:after { transform: translateX(-8px); } .hint--always.hint--right:before { transform: translateX(8px) rotate(var(--rotation)); } .hint--always.hint--right:after { transform: translateX(8px); } /** * source: hint-rounded.scss * * Defines rounded corner tooltips. * * Classes added: * 1) hint--rounded * */ .hint--rounded:before { border-radius: 0 4px 0 0; } .hint--rounded:after { border-radius: 4px; } /** * source: hint-effects.scss * * Defines various transition effects for the tooltips. * * Classes added: * 1) hint--no-animate * 2) hint--bounce * */ .hint--no-animate:before, .hint--no-animate:after { transition-duration: 0ms; } .hint--bounce:before, .hint--bounce:after { transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); } @supports (transition-timing-function: linear(0, 1)) { .hint--bounce:before, .hint--bounce:after { --spring-easing: linear( 0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938, 1.077 20.4%, 1.121, 1.149 24.3%, 1.159, 1.163 27%, 1.154, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1 ); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.5s var(--spring-easing); } } .hint--no-shadow:before, .hint--no-shadow:after { text-shadow: initial; box-shadow: initial; } .hint--no-arrow:before { display: none; } ================================================ FILE: package.json ================================================ { "name": "hint.css", "title": "Hint.css", "description": "A tooltip library in CSS for your lovely websites.", "version": "3.0.0", "style": "hint.css", "main": "hint.css", "homepage": "https://kushagra.dev/lab/hint/", "scripts": { "dev": "watch 'grunt' ./src" }, "author": { "name": "Kushagra Gour", "email": "chinchang457@gmail.com", "url": "https://kushagra.dev" }, "repository": { "type": "git", "url": "git://github.com/chinchang/hint.css.git" }, "bugs": { "url": "https://github.com/chinchang/hint.css/issues" }, "license": "MIT", "keywords": [ "css", "tooltip", "ui", "sass", "help", "hint" ], "devDependencies": { "grunt": "~1.6.1", "grunt-contrib-concat": "~0.3.0", "grunt-contrib-cssmin": "~0.12.3", "grunt-contrib-watch": "~0.5.3", "watch": "^1.0.2", "grunt-sass": "^3.1.0", "sass": "^1.69.5" } } ================================================ FILE: src/hint-always.scss ================================================ /** * source: hint-always.scss * * Defines a persisted tooltip which shows always. * * Classes added: * 1) hint--always * */ .#{$hintPrefix}always { &:after, &:before { opacity: 1; visibility: visible; } &.#{$hintPrefix}top { @include set-margin('translateY', -1, -50%); &-left { @include set-margin('translateY', -1, -100%); } &-right { @include set-margin('translateY', -1, 0); } } &.#{$hintPrefix}bottom { @include set-margin('translateY', 1, -50%); &-left { @include set-margin('translateY', 1, -100%); } &-right { @include set-margin('translateY', 1, 0); } } &.#{$hintPrefix}left { @include set-margin('translateX', -1); } &.#{$hintPrefix}right { @include set-margin('translateX', 1); } } ================================================ FILE: src/hint-color-types.scss ================================================ /** * source: hint-color-types.scss * * Contains tooltips of various types based on color differences. * * Classes added: * 1) hint--error * 2) hint--warning * 3) hint--info * 4) hint--success * */ // mixin to generate different color style tooltips @mixin hint-type($color) { &:after { background-color: $color; text-shadow: 0 1px 0px darken($color, $hintTextShadowDarkenAmount); } &:before { background-color: $color; } } /** * Error */ .#{$hintPrefix}error { @include hint-type($hintErrorColor); } /** * Warning */ .#{$hintPrefix}warning { @include hint-type($hintWarningColor); } /** * Info */ .#{$hintPrefix}info { @include hint-type($hintInfoColor); } /** * Success */ .#{$hintPrefix}success { @include hint-type($hintSuccessColor); } ================================================ FILE: src/hint-core.scss ================================================ /** * source: hint-core.scss * * Defines the basic styling for the tooltip. * Each tooltip is made of 2 parts: * 1) body (:after) * 2) arrow (:before) * * Classes added: * 1) hint */ [class*="#{$hintPrefix}"] { position: relative; display: inline-block; &:before, &:after { position: absolute; // HACK: Trigger hardware accelerated rendering, otherwise transform was not // working on a hidden element transform: translate3d(0, 0, 0); // HACK: visibility is set to hidden because IE & Opera don't support // pointer-events on HTML content yet because of which hovering a hidden tooltip // shows the tooltip. visibility: hidden; opacity: 0; z-index: $hintZIndex; // shouldn't receive pointer events, otherwise even hovering tooltip will make it appear pointer-events: none; transition: $hintTransitionDuration ease; transition-delay: $hintHideDelay; } &:hover:before, &:hover:after { visibility: visible; opacity: 1; } &:hover:before, &:hover:after { // $hintShowDelay will apply as soon as element is hovered. transition-delay: $hintShowDelay; } /** * tooltip arrow */ &:before { content: ""; position: absolute; background: transparent; border: $hintArrowBorderWidth solid transparent; background-color: $hintDefaultColor; clip-path: polygon(0%0%, 100%0%, 100%100%); // move z-index 1 up than :after so that it shows over box-shadow z-index: $hintZIndex + 1; } /** * tooltip body */ &:after { background: $hintDefaultColor; color: white; padding: $hintVerticalPadding $hintHorizontalPadding; font-size: $hintFontSize; font-family: $hintFontFamily; line-height: $hintFontSize; // Vertical centering. white-space: nowrap; // Prevent breaking to new line. } // Always get content from aria-label attribute. &[aria-label]:after { content: attr(aria-label); // The magic! } // If the `data-hint` attribute is present, use it. // This might be deprecated in future in support of a11y. &[data-hint]:after { content: attr(data-hint); // The magic! } } // Hide tooltips if any of the supported attributes is empty. [aria-label=""], [data-hint=""] { &:before, &:after { display: none !important; } } ================================================ FILE: src/hint-effects.scss ================================================ /** * source: hint-effects.scss * * Defines various transition effects for the tooltips. * * Classes added: * 1) hint--no-animate * 2) hint--bounce * */ // Remove animation from tooltips. .#{$hintPrefix}no-animate { &:before, &:after { transition-duration: 0ms; } } // Bounce effect in tooltips. .#{$hintPrefix}bounce { &:before, &:after { transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24); } } // Better bounce on support browsers @supports (transition-timing-function: linear(0, 1)) { .#{$hintPrefix}bounce { &:before, &:after { --spring-easing: linear( 0, 0.009, 0.035 2.1%, 0.141 4.4%, 0.723 12.9%, 0.938, 1.077 20.4%, 1.121, 1.149 24.3%, 1.159, 1.163 27%, 1.154, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1 ); transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.5s var(--spring-easing); } } } // Remove shadows from tooltips. .#{$hintPrefix}no-shadow { &:before, &:after { text-shadow: initial; box-shadow: initial; } } // Remove shadows from tooltips. .#{$hintPrefix}no-arrow { &:before { display: none; } } ================================================ FILE: src/hint-mixins.scss ================================================ // hint-mixins.scss // // Place to store common mixins. // Vendor prefixer mixin. @mixin vendor($property, $value) { -webkit-#{$property}: $value; -moz-#{$property}: $value; #{$property}: $value; } // mixin to set margin on tooltip using translate transform // $property @mixin set-margin($property, $transitionDirection, $translateX: 0) { $value: unquote( "#{$property}(#{$hintTransitionDistance * $transitionDirection})" ); &:before { transform: $value rotate(var(--rotation)); } &:after { @if $translateX != 0 { // For vertical tooltips, we need to animate in y-direction // retaining its x-transform. transform: translateX($translateX) $value; } @else { transform: $value; } } } ================================================ FILE: src/hint-position.scss ================================================ /** * source: hint-position.scss * * Defines the positoning logic for the tooltips. * * Classes added: * 1) hint--top * 2) hint--bottom * 3) hint--left * 4) hint--right */ @mixin vertical-positioned-tooltip( $propertyY, $transitionDirection, $xDirection: 0 ) { &:before { // bring arrow inside so that it animates to normal position when shown. // HACK: +1px to avoid the 1 px white space between arrow and body during transition. margin-#{$propertyY}: -1 * $hintArrowBorderWidth + 0.5px; transform: rotate(var(--rotation)); } &:before, &:after { #{$propertyY}: 100%; left: 50%; // get top-left corner in center } &:before { left: calc( 50% - #{$hintArrowBorderWidth} ); // get arrow center aligned with content } $translateX: -50%; @if $xDirection == -1 { $translateX: -100%; } @else if $xDirection == 1 { $translateX: 0; } &:after { transform: translateX($translateX); } &:after { @if $xDirection != 0 { // bring back the tooltip by some offset so that arrow doesn't stick at end margin-left: -$xDirection * $hintArrowOffsetX; } } &:hover { @include set-margin("translateY", $transitionDirection, $translateX); } } @mixin horizontal-positioned-tooltip($propertyX, $transitionDirection) { &:before { // bring arrow inside so that it animates to normal position when shown // HACK: +1px to avoid the 1 px white space between arrow and body during transition. margin-#{$propertyX}: -1 * $hintArrowBorderWidth + 0.5px; // bring back to center vertically margin-bottom: -1 * $hintArrowBorderWidth; transform: rotate(var(--rotation)); } &:after { // bring back to center margin-bottom: calc(-1 * $hintTooltipHeight / 2); } &:before, &:after { #{$propertyX}: 100%; bottom: 50%; } &:hover { @include set-margin("translateX", $transitionDirection); } } /** * top tooltip */ .#{$hintPrefix}top { --rotation: 135deg; @include vertical-positioned-tooltip("bottom", -1); } /** * bottom tooltip */ .#{$hintPrefix}bottom { --rotation: -45deg; @include vertical-positioned-tooltip("top", 1); } /** * right tooltip */ .#{$hintPrefix}right { --rotation: -135deg; @include horizontal-positioned-tooltip("left", 1); } /** * left tooltip */ .#{$hintPrefix}left { --rotation: 45deg; @include horizontal-positioned-tooltip("right", -1); } /** * top-left tooltip */ .#{$hintPrefix}top-left { --rotation: 135deg; @include vertical-positioned-tooltip("bottom", -1, -1); } /** * top-right tooltip */ .#{$hintPrefix}top-right { --rotation: 135deg; @include vertical-positioned-tooltip("bottom", -1, 1); } /** * bottom-left tooltip */ .#{$hintPrefix}bottom-left { --rotation: -45deg; @include vertical-positioned-tooltip("top", 1, -1); } /** * bottom-right tooltip */ .#{$hintPrefix}bottom-right { --rotation: -45deg; @include vertical-positioned-tooltip("top", 1, 1); } ================================================ FILE: src/hint-rounded.scss ================================================ /** * source: hint-rounded.scss * * Defines rounded corner tooltips. * * Classes added: * 1) hint--rounded * */ .#{$hintPrefix}rounded { &:before { border-radius: 0 $hintBorderRadius 0 0; } &:after { border-radius: $hintBorderRadius; } } ================================================ FILE: src/hint-sizes.scss ================================================ /** * source: hint-sizes.scss * * Defines width restricted tooltips that can span * across multiple lines. * * Classes added: * 1) hint--small * 2) hint--medium * 3) hint--large * 4) hint--fit * */ .#{$hintPrefix}small, .#{$hintPrefix}medium, .#{$hintPrefix}large, .#{$hintPrefix}fit { &:after { box-sizing: border-box; white-space: normal; line-height: 1.4em; word-wrap: break-word; // Ensure long words do not overflow. } } .#{$hintPrefix}small { &:after { width: $hintSizeSmall; } } .#{$hintPrefix}medium { &:after { width: $hintSizeMedium; } } .#{$hintPrefix}large { &:after { width: $hintSizeLarge; } } .#{$hintPrefix}fit { &:after { width: 100%; } } ================================================ FILE: src/hint-theme.scss ================================================ /** * source: hint-theme.scss * * Defines basic theme for tooltips. * */ [class*="#{$hintPrefix}"] { /** * tooltip body */ &:after { text-shadow: 0 1px 0px darken($hintDefaultColor, $hintTextShadowDarkenAmount); box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); } } ================================================ FILE: src/hint-variables.scss ================================================ // hint-variables.scss // // Declares some variables used within the library. // Prefix for all classes. By default, BEM naming convention is used $hintPrefix: "hint--" !default; // font size $hintFontSize: 1rem !default; // default font family $hintFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif !default; // paddings $hintVerticalPadding: 8px !default; $hintHorizontalPadding: 10px !default; // default tooltip height $hintTooltipHeight: calc($hintFontSize + 2 * $hintVerticalPadding) !default; // border-width for tooltip arrow $hintArrowBorderWidth: 6px !default; // horizontal arrow offset $hintArrowOffsetX: 2 * $hintArrowBorderWidth !default; // text-shadow darken percentage $hintTextShadowDarkenAmount: 25% !default; // transition distance $hintTransitionDistance: 8px !default; // Transition Duration $hintTransitionDuration: 0.3s !default; // Delay in showing the tooltips. $hintShowDelay: 100ms !default; // Delay in hiding the tooltips. $hintHideDelay: 0ms !default; // z-index for tooltips $hintZIndex: 1000000 !default; // Size options $hintSizeSmall: 80px !default; $hintSizeMedium: 150px !default; $hintSizeLarge: 300px !default; // Various colors // Default color is blackish $hintDefaultColor: hsl(0, 0%, 22%) !default; // Error color $hintErrorColor: hsl(1, 40%, 50%) !default; // Warning color $hintWarningColor: hsl(38, 46%, 54%) !default; // Info Color $hintInfoColor: hsl(200, 50%, 45%) !default; // Success Color $hintSuccessColor: hsl(121, 32%, 40%) !default; $hintBorderRadius: 4px !default; ================================================ FILE: src/hint.base.scss ================================================ // hint.base.scss // // Aggregates all other sass files to create a basic functional tooltip. // This doesn't have any of the cosmetic features of the library. /*-------------------------------------*\ HINT.css - A CSS tooltip library \*-------------------------------------*/ /** * HINT.css is a tooltip library made in pure CSS. * * Source: https://github.com/chinchang/hint.css * Demo: http://kushagragour.in/lab/hint/ * */ @import "hint-variables"; @import "hint-mixins"; @import "hint-core"; @import "hint-position"; @import "hint-sizes"; @import "hint-always"; ================================================ FILE: src/hint.scss ================================================ // hint.scss // // Aggregates all other sass files. /*-------------------------------------*\ HINT.css - A CSS tooltip library \*-------------------------------------*/ /** * HINT.css is a tooltip library made in pure CSS. * * Source: https://github.com/chinchang/hint.css * Demo: http://kushagragour.in/lab/hint/ * */ @import "hint-variables"; @import "hint-mixins"; @import "hint-core"; @import "hint-position"; @import "hint-sizes"; @import "hint-theme"; @import "hint-color-types"; @import "hint-always"; @import "hint-rounded"; @import "hint-effects";