is a simple tooltip library (but written as a pure CSS resource without JavaScript).
| README.md (hint.css-2.6.0) | : | README.md (hint.css-2.7.0) |
|---|
| # 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)  | | # 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)  |
| *A tooltip library in CSS for your lovely websites* | | *A tooltip library in CSS for your lovely websites* |
| | |
|
| [Demo](https://kushagragour.in/lab/hint/) • [Get started](#get-started) • [Who's
using this?](#whos-using-this) • [Browser support](#browser-support) • [FAQs](#
faqs) • [Contributing](#contributing) • [License](#license) | | [Demo](https://kushagra.dev/lab/hint/) • [Get started](#get-started) • [Who's us
ing this?](#whos-using-this) • [Browser support](#browser-support) • [FAQs](#faq
s) • [Contributing](#contributing) • [License](#license) |
| | |
| `hint.css` is written as a pure CSS resource using which you can create cool acc
essible tooltips for your web app. It does not rely on JavaScript but rather use
s **aria-label**/**data-* attribute**, **pseudo elements**, **content property**
and **CSS3 transitions** to create the tooltips. Also it uses **BEM** naming co
nvention particularly for the modifiers. | | `hint.css` is written as a pure CSS resource using which you can create cool acc
essible tooltips for your web app. It does not rely on JavaScript but rather use
s **aria-label**/**data-* attribute**, **pseudo elements**, **content property**
and **CSS3 transitions** to create the tooltips. Also it uses **BEM** naming co
nvention particularly for the modifiers. |
| | |
| ## Get Started | | ## Get Started |
| | |
| Get the library using one of the following ways: | | Get the library using one of the following ways: |
| | |
| 1. **GitHub** | | 1. **GitHub** |
| | |
| Full build | | Full build |
| | |
| skipping to change at line 26 | | skipping to change at line 26 |
|---|
| - [minified] : https://raw.github.com/chinchang/hint.css/master/hint.min.css | | - [minified] : https://raw.github.com/chinchang/hint.css/master/hint.min.css |
| | |
| Base build *(Does not include color themes and fancy effects)* | | Base build *(Does not include color themes and fancy effects)* |
| - [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.base.css | | - [unminified] : https://raw.github.com/chinchang/hint.css/master/hint.base.css |
| - [minified] : https://raw.github.com/chinchang/hint.css/master/hint.base.min.c
ss | | - [minified] : https://raw.github.com/chinchang/hint.css/master/hint.base.min.c
ss |
| | |
| 2. **Bower** : `bower install hint.css` | | 2. **Bower** : `bower install hint.css` |
| | |
| 3. **npm**: `npm install --save hint.css` | | 3. **npm**: `npm install --save hint.css` |
| | |
|
| 4. **CDN**: [http://www.jsdelivr.com/#!hint.css](http://www.jsdelivr.com/#!hint.
css) or [https://cdnjs.com/libraries/hint.css](https://cdnjs.com/libraries/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://cdn
js.com/libraries/hint.css) |
| | |
| Now include the library in the ``HEAD`` tag of your page: | | Now include the library in the ``HEAD`` tag of your page: |
| | |
| ```html | | ```html |
|
| <link rel="stylesheet" href="hint.css"></link> | | <link rel="stylesheet" href="hint.css" /> |
| ``` | | ``` |
| or | | or |
| | |
| ```html | | ```html |
|
| <link rel="stylesheet" href="hint.min.css"></link> | | <link rel="stylesheet" href="hint.min.css" /> |
| ``` | | ``` |
| | |
| Now, all you need to do is give your element any position class and tooltip text
using the `aria-label` attribute. | | 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-l
abel` in support of accessibility. [Read more about aria-label](https://webacces
sibility.withgoogle.com/unit?unit=6&lesson=10). | | 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-l
abel` in support of accessibility. [Read more about aria-label](https://webacces
sibility.withgoogle.com/unit?unit=6&lesson=10). |
| | |
| ```html | | ```html |
| Hello Sir, <span class="hint--bottom" aria-label="Thank you!">hover me.</span> | | Hello Sir, <span class="hint--bottom" aria-label="Thank you!">hover me.</span> |
| ``` | | ``` |
| | |
| Use it with other available modifiers in various combinations. Available modifie
rs: | | Use it with other available modifiers in various combinations. Available modifie
rs: |
| - *Colors* - `hint--error`, `hint--info`, `hint--warning`, `hint--success` | | - *Colors* - `hint--error`, `hint--info`, `hint--warning`, `hint--success` |
| - *Sizes* - `hint--small`, `hint--medium`, `hint--large` | | - *Sizes* - `hint--small`, `hint--medium`, `hint--large` |
| - `hint--always` | | - `hint--always` |
| - `hint--rounded` | | - `hint--rounded` |
| - `hint--no-animate` | | - `hint--no-animate` |
| - `hint--bounce` | | - `hint--bounce` |
|
| | - `hint-no-arrow` |
| | |
| ## Upgrading from v1.x | | ## Upgrading from v1.x |
| | |
| If you are already using v1.x, you may need to tweak certain position classes be
cause of the way tooltips are positioned in v2. | | If you are already using v1.x, you may need to tweak certain position classes be
cause of the way tooltips are positioned in v2. |
| | |
| ## Changing the prefix for class names | | ## Changing the prefix for class names |
| | |
| Don't like BEM naming (`hint--`) or want to use your own prefix for the class na
mes? | | Don't like BEM naming (`hint--`) or want to use your own prefix for the class na
mes? |
| | |
| Simply update `src/hint-variables.scss` and change the `$hintPrefix` variable. | | Simply update `src/hint-variables.scss` and change the `$hintPrefix` variable. |
| | |
| skipping to change at line 113 | | skipping to change at line 114 |
|---|
| | |
| ## Changelog & Updates | | ## Changelog & Updates |
| See the [Changelog](https://github.com/chinchang/hint.css/wiki/Changelog). | | See the [Changelog](https://github.com/chinchang/hint.css/wiki/Changelog). |
| | |
| To catch all updates and discussion, join the mailing list: [**hintcss@googlegro
ups.com**](https://groups.google.com/forum/?fromgroups=#!forum/hintcss). | | To catch all updates and discussion, join the mailing list: [**hintcss@googlegro
ups.com**](https://groups.google.com/forum/?fromgroups=#!forum/hintcss). |
| | |
| Or follow on twitter: [**@hint_css**](https://twitter.com/hint_css) | | Or follow on twitter: [**@hint_css**](https://twitter.com/hint_css) |
| | |
| ## License | | ## License |
| | |
|
| ### Commercial License | | Hint.css is free for personal and commercial use under the MIT License. |
| | |
| If you want to use Hint.css for business, commercial sites, themes, projects, an | | |
| d applications, the Commercial license is the appropriate license. With this opt | | |
| ion, your source code is kept proprietary. Purchase a Hint.css Commercial Licens | | |
| e at https://kushagragour.in/lab/hint/#commercial | | |
| | |
| ### Open-source License | | |
| | | |
| Hint.css is free for personal use under the GNU AGPLv3. | | |
| | |
| ## Credits | | ## Credits |
| This doesn't make use of a lot of BEM methodology but big thanks to [@csswizardr
y](https://twitter.com/csswizardry), [@necolas](https://twitter.com/necolas) for
their awesome articles on BEM and to [@joshnh](https://twitter.com/_joshnh) thr
ough whose work I came to know about it :) | | This doesn't make use of a lot of BEM methodology but big thanks to [@csswizardr
y](https://twitter.com/csswizardry), [@necolas](https://twitter.com/necolas) for
their awesome articles on BEM and to [@joshnh](https://twitter.com/_joshnh) thr
ough whose work I came to know about it :) |
|
| | |
| | # Sponsor |
| | [](https://cssbattle.dev) |
| | | |
| End of changes. 7 change blocks. |
|---|
| 14 lines changed or deleted | | 6 lines changed or added |
|---|
"Fossies" - the Fresh Open Source Software Archive 