[
{
"path": ".editorconfig",
"content": "# editorconfig.org\n\nroot = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\nindent_style = tab\ninsert_final_newline = true\ntrim_trailing_whitespace = true\n"
},
{
"path": ".github/FUNDING.yml",
"content": "# These are supported funding model platforms\n\npatreon: kushagra\ncustom: https://paypal.me/kushagragour\n"
},
{
"path": ".gitignore",
"content": ".sass-cache\nnode_modules/\nhint.sublime-project\nhint.sublime-workspace\n*.map\n"
},
{
"path": ".prettierignore",
"content": "hint.css\nhint.min.css\nhint.base.css\nhint.base.min.css"
},
{
"path": "CONTRIBUTING.md",
"content": "**Hint** is written in [SASS](http://sass-lang.com/).\n\n# Setup\n\n1. [Fork **Hint.css**](https://help.github.com/articles/fork-a-repo) and clone it on your system.\n2. Create a new branch out off `master` for your fix/feature. `git checkout new-feature master`\n\n# Building\n\n**Hint.css** uses [Grunt](http://gruntjs.com/) for the build process which you need to have installed on your system.\n\nAlso there are four additional Grunt tasks required to build the library:\n\n1. [grunt-contrib-cssmin](https://npmjs.org/package/grunt-contrib-cssmin)\n\n2. [grunt-sass](https://www.npmjs.com/package/grunt-sass)\n\n3. [grunt-contrib-concat](https://www.npmjs.com/package/grunt-contrib-concat)\n\n4. [grunt-contrib-watch](https://www.npmjs.com/package/grunt-contrib-watch)\n\nTo install all the dependencies, run `npm install`.\n\nOnce 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`.\n\nThough 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.\n\n# Things to remember\n\n- 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.\n\n- For every new modifier (example `hint--success`, `hint--top`) added, make a separate file unless it fits into a current modifier file.\n\n- Before submitting a patch, rebase your branch on upstream `master` to make life easier for the merger.\n\n- **DO NOT** add the library builds (`hint.css` & `hint.min.css`) in your commits.\n\n# Stay in touch\n\nBest place to get in touch regarding this library is the [issues board on Github](https://github.com/chinchang/hint.css/issues).\n"
},
{
"path": "Gruntfile.js",
"content": "/*global module:false*/\n\nconst sass = require(\"sass\");\n\nmodule.exports = function (grunt) {\n\t// Project configuration.\n\tgrunt.initConfig({\n\t\tpkg: grunt.file.readJSON(\"package.json\"),\n\n\t\tmeta: {\n\t\t\tgetBanner: function () {\n\t\t\t\treturn \"/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - <%= meta.banner %>\";\n\t\t\t},\n\t\t\tgetBannerForBaseVersion: function () {\n\t\t\t\treturn \"/*! <%= pkg.title || pkg.name %> (base version) - v<%= pkg.version %> - <%= meta.banner %>\";\n\t\t\t},\n\t\t\tbanner:\n\t\t\t\t'<%= grunt.template.today(\"yyyy-mm-dd\") + \"\\\\n\" %>' +\n\t\t\t\t'<%= pkg.homepage ? \"* \" + pkg.homepage + \"\\\\n\" : \"\" %>' +\n\t\t\t\t'* Copyright (c) <%= grunt.template.today(\"yyyy\") %> <%= pkg.author.name %> */\\n\\n',\n\t\t},\n\n\t\tsass: {\n\t\t\toptions: {\n\t\t\t\timplementation: sass,\n\t\t\t\tsourceMap: false,\n\t\t\t},\n\t\t\tdist: {\n\t\t\t\tfiles: {\n\t\t\t\t\t\"<%= pkg.name %>.css\": \"src/<%= pkg.name %>.scss\",\n\t\t\t\t\t\"<%= pkg.name %>.base.css\": \"src/<%= pkg.name %>.base.scss\",\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\n\t\tcssmin: {\n\t\t\toptions: {\n\t\t\t\tsourceMap: false,\n\t\t\t},\n\t\t\tcompress: {\n\t\t\t\tfiles: {\n\t\t\t\t\t\"<%= pkg.name %>.min.css\": [\"<%= pkg.name %>.css\"],\n\t\t\t\t\t\"<%= pkg.name %>.base.min.css\": [\"<%= pkg.name %>.base.css\"],\n\t\t\t\t},\n\t\t\t},\n\t\t},\n\n\t\t// concat banner to final lib files\n\t\tconcat: {\n\t\t\toptions: {\n\t\t\t\tbanner: \"<%= meta.getBanner() %>\",\n\t\t\t},\n\t\t\tlib: {\n\t\t\t\tsrc: [\"<%= pkg.name %>.css\"],\n\t\t\t\tdest: \"<%= pkg.name %>.css\",\n\t\t\t},\n\t\t\tminLib: {\n\t\t\t\tsrc: [\"<%= pkg.name %>.min.css\"],\n\t\t\t\tdest: \"<%= pkg.name %>.min.css\",\n\t\t\t},\n\t\t\tbaseLib: {\n\t\t\t\toptions: {\n\t\t\t\t\tbanner: \"<%= meta.getBannerForBaseVersion() %>\",\n\t\t\t\t},\n\t\t\t\tsrc: [\"<%= pkg.name %>.base.css\"],\n\t\t\t\tdest: \"<%= pkg.name %>.base.css\",\n\t\t\t},\n\t\t\tbaseMinLib: {\n\t\t\t\toptions: {\n\t\t\t\t\tbanner: \"<%= meta.getBannerForBaseVersion() %>\",\n\t\t\t\t},\n\t\t\t\tsrc: [\"<%= pkg.name %>.base.min.css\"],\n\t\t\t\tdest: \"<%= pkg.name %>.base.min.css\",\n\t\t\t},\n\t\t},\n\n\t\twatch: {\n\t\t\tfiles: \"src/*.scss\",\n\t\t\ttasks: \"default\",\n\t\t},\n\t});\n\n\t// Dependencies\n\tgrunt.loadNpmTasks(\"grunt-sass\");\n\tgrunt.loadNpmTasks(\"grunt-contrib-cssmin\");\n\tgrunt.loadNpmTasks(\"grunt-contrib-concat\");\n\tgrunt.loadNpmTasks(\"grunt-contrib-watch\");\n\n\t// Default task.\n\tgrunt.registerTask(\"default\", \"sass\");\n\tgrunt.registerTask(\"deploy\", [\"sass\", \"cssmin\", \"concat\"]);\n};\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2021 Kushagra Gour\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "# Hint.css [](https://badge.fury.io/js/hint.css)  [](https://gitter.im/chinchang/hint.css?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) \n\n_A tooltip library in CSS for your lovely websites_\n\n[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)\n\n`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.\n\n## Get Started\n\nGet the library using one of the following ways:\n\n1. **GitHub**\n\nFull build\n\n- [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.css\n- [minified] : https://raw.github.com/chinchang/hint.css/master/hint.min.css\n\nBase build _(Does not include color themes and fancy effects)_\n\n- [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.base.css\n- [minified] : https://raw.github.com/chinchang/hint.css/master/hint.base.min.css\n\n2. **Bower** : `bower install hint.css`\n\n3. **npm**: `npm install --save hint.css`\n\n4. **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)\n\nNow include the library in the `HEAD` tag of your page:\n\n```html\n\n```\n\nor\n\n```html\n\n```\n\nNow, all you need to do is give your element any position class and tooltip text using the `aria-label` attribute.\nNote, 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).\n\n```html\nHello Sir, hover me.\n```\n\nUse it with other available modifiers in various combinations. Available modifiers:\n\n- _Colors_ - `hint--error`, `hint--info`, `hint--warning`, `hint--success`\n- _Sizes_ - `hint--small`, `hint--medium`, `hint--large`, `hint--fit`\n- `hint--always`\n- `hint--rounded`\n- `hint--no-animate`\n- `hint--bounce`\n- `hint--no-arrow`\n- `hint--no-shadow`\n\n## Upgrading from v1.x\n\nIf you are already using v1.x, you may need to tweak certain position classes because of the way tooltips are positioned in v2.\n\n## Changing the prefix for class names\n\nDon't like BEM naming (`hint--`) or want to use your own prefix for the class names?\n\nSimply update `src/hint-variables.scss` and change the `$hintPrefix` variable.\nTo generate the css file, please read the [contributing page](./CONTRIBUTING.md).\n\n## Who's Using This?\n\n- [Webflow Playground](http://playground.webflow.com/)\n- [Panda chrome app](http://usepanda.com/)\n- [Fiverr](https://www.fiverr.com/)\n- [Stackshare](http://stackshare.io/)\n- [Siftery](https://siftery.com/)\n- [LessPass](https://lesspass.com/#/)\n- [Tridiv](http://tridiv.com/)\n- [Alm - TypeScript IDE](http://alm.tools/)\n- [Prototyp](http://prototyp.in/)\n- [Tradus](http://tradus.com/)\n- [Web Maker](https://webmakerapp.com)\n- [Tolks](https://tolks.io)\n- [Formspree](http://formspree.io/)\n- [codeMagic](http://codemagic.gr/)\n\nAre 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).\n\n## Browser Support\n\n**hint.css** works on all latest browsers\n\n### FAQs\n\nCheckout 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**.\n\n## Contributing\n\n`hint.css` is developed in SASS and the source files can be found in the `src/` directory.\n\nIf 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.\n\n[Read more on contributing](./CONTRIBUTING.md).\n\n## Changelog & Updates\n\nSee the [Changelog](https://github.com/chinchang/hint.css/wiki/Changelog).\n\nTo catch all updates and discussion, join the mailing list: [**hintcss@googlegroups.com**](https://groups.google.com/forum/?fromgroups=#!forum/hintcss).\n\nOr follow on twitter: [**@hint_css**](https://twitter.com/hint_css)\n\n## License\n\nHint.css is free for personal and commercial use under the MIT License.\n\n## Credits\n\nThis 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 :)\n\n# Sponsor\n\n[](https://cssbattle.dev?utm_source=hintcssrepo)\n"
},
{
"path": "bower.json",
"content": "{\n\t\"name\": \"hint.css\",\n\t\"main\": \"hint.min.css\",\n\t\"author\": \"Kushagra Gour\",\n\t\"ignore\": [\n\t\t\"CONTRIBUTING.md\",\n\t\t\"Gruntfile.js\"\n\t],\n\t\"keywords\": [\n\t\t\"hint\",\n\t\t\"tooltip\",\n\t\t\"tooltips\",\n\t\t\"ui\"\n\t]\n}\n"
},
{
"path": "component.json",
"content": "{\n \"name\": \"hint.css\",\n \"repo\": \"chinchang/hint.css\",\n \"description\": \"A tooltip library in CSS for your lovely websites.\",\n \"version\": \"2.6.0\",\n \"keywords\": [\"tooltip\", \"css\"],\n \"dependencies\": {},\n \"development\": {},\n \"styles\": [\n \"hint.min.css\"\n ]\n}\n\n"
},
{
"path": "demo.html",
"content": "\n\n\t\n\t\t\n\t\t\n\t\tHint.css - A tooltip library in CSS\n\t\t\n\t\t\n\t\t\n\n\t\t\n\n\t\t\n\t\t\n\t\n\t\n\t\t
\n\t\t\t
\n\t\t\t\tHint.css 3.0\n\t\t\t
\n\t\t\t
A pure CSS tooltip library for your lovely websites
\n\t\t\t\tUpgrading from v1.x: If you are already using v1.x, you\n\t\t\t\tmay need to tweak certain position classes because of the way tooltips\n\t\t\t\tare positioned in v2.\n\t\t\t\t \n\t\t\t\tIts recommended to use aria-label attribute to specify your\n\t\t\t\ttooltip text in support of accessibility. Though, you can always use\n\t\t\t\tdata-hint attribute instead.\n\t\t\t\tRead more about aria-label here.\n\t\t\t
\n\t\t
\n\n\t\t
\n\t\t\tMade with hands by\n\t\t\tKushagra Gour\n\t\t\tin India\n\t\t