├── .gitignore
├── .stylelintrc
├── .travis.yml
├── README.md
├── license.md
├── microtip.css
├── microtip.min.css
├── package.json
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | build/
2 | node_modules/
3 | .DS_Store
--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "color-hex-case": "lower",
4 | "color-hex-length": "long",
5 | "color-no-invalid-hex": true,
6 | "function-calc-no-unspaced-operator": true,
7 | "function-name-case": "lower",
8 | "function-parentheses-space-inside": "never",
9 | "function-url-quotes": "always",
10 | "number-leading-zero": "never",
11 | "number-no-trailing-zeros": true,
12 | "string-quotes": "double",
13 | "length-zero-no-unit": true,
14 | "unit-case": "lower",
15 | "unit-no-unknown": true,
16 | "value-keyword-case": "lower",
17 | "value-list-comma-space-after": "always",
18 | "shorthand-property-no-redundant-values": true,
19 | "property-case": "lower",
20 | "declaration-block-no-redundant-longhand-properties": true,
21 | "declaration-block-no-duplicate-properties": true,
22 | "block-closing-brace-empty-line-before": "never",
23 | "block-no-empty": true,
24 | "indentation": 2,
25 | "no-extra-semicolons": true
26 | }
27 | }
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - 7
4 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 |
5 |
6 |
7 | 
8 |
9 |
10 | 
11 |
12 |
13 | 
14 |
15 |
16 |
17 |
18 | Modern, minimal css tooptip library with accessibility baked in. Just `1kb` minified and gzipped.
19 |
20 |
21 | ---
22 |
23 | 
24 |
25 |
26 |
27 |
28 | ## Table of Contents
29 | - [Installation](#installation)
30 | - [Setup](#setup)
31 | - [Usage](#usage)
32 | - [Customization](#customization)
33 | - [Related](#related)
34 |
35 |
36 | ## Installation
37 |
38 | **via npm**
39 | ```shell
40 | npm install microtip
41 | ```
42 |
43 | **via yarn**
44 | ```shell
45 | yarn add microtip
46 | ```
47 |
48 | **via CDN**
49 | ```
50 | https://unpkg.com/microtip/microtip.css
51 | ```
52 |
53 | **direct download**
54 | ```shell
55 | curl -o microtip https://github.com/ghosh/microtip/blob/master/microtip.css
56 | ```
57 |
58 |
59 | ## Setup
60 |
61 | **in PostCSS**
62 | ```scss
63 | @import 'microtip';
64 | ```
65 |
66 | **in Webpack**
67 | ```javascript
68 | import microtip from 'microtip/microtip.css'
69 | ```
70 |
71 | **in SCSS**
72 | ```scss
73 | @import 'microtip/microtip';
74 | ```
75 | Make sure, `node_modules` is included in the `includePaths` setting. You can then directly import the library into your file.
76 |
77 |
78 | ## Usage
79 |
80 | Using the tooltip is incredibly simple. Simply add a `aria-label` and `role="tooltip"` attribute to the element on which you want the tooltip to appear. The tooltip message is the attribute value `aria-label="your message"`. This along with a position modifier is all you need to get going. Example:-
81 | ```html
82 |