{"_id":"microtip","_rev":"11-c7bd43a4df52d86a1253053031ce5600","name":"microtip","description":"A modern, ultra light css tooltip library. Just 1kb minified and gzipped","dist-tags":{"latest":"0.2.2"},"versions":{"0.0.1":{"name":"microtip","version":"0.0.1","description":"A modern, ultra light css tooltip library","style":"src/microtip.css","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["tooltip","css","css","tooltip"],"author":{"name":"Indrashish Ghosh"},"license":"MIT","gitHead":"b579f439a0c7f688f307d3ad07caa0c66944d1f4","_id":"microtip@0.0.1","_shasum":"3593088db8d9d6f89305e9971393be1256411b50","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.6.0","_npmUser":{"name":"ghosh","email":"mail@ghosh.io"},"dist":{"shasum":"3593088db8d9d6f89305e9971393be1256411b50","tarball":"https://registry.npmjs.org/microtip/-/microtip-0.0.1.tgz","integrity":"sha512-ohjPHO98TIeWIf17oDB0Lv0M68FT1canjV0nACVsnfMVJUEY+tnVhz5gyd27LzPEwBefYkzL6N56OuUtD1h1kw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHlXMgiOevBfvRNGXOU1qFRP8tBxDbr3jGbrH4r5ZLw5AiBanXQa5tBgUCwmIq8f+AkOPdIWtMUYn46QPcp6y+9w9Q=="}]},"maintainers":[{"name":"ghosh","email":"mail@ghosh.io"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/microtip-0.0.1.tgz_1492548072041_0.6460316285956651"}},"0.0.2":{"name":"microtip","version":"0.0.2","description":"A modern, ultra light css tooltip library","style":"src/microtip.css","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["tooltip","css","css","tooltip"],"author":{"name":"Indrashish Ghosh"},"license":"MIT","gitHead":"934fa9d655e315f39c35e9c225b954cda08f41e9","_id":"microtip@0.0.2","_shasum":"5e3d423011f60fb5ea3e1972c524fac4009d5129","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.6.0","_npmUser":{"name":"ghosh","email":"mail@ghosh.io"},"dist":{"shasum":"5e3d423011f60fb5ea3e1972c524fac4009d5129","tarball":"https://registry.npmjs.org/microtip/-/microtip-0.0.2.tgz","integrity":"sha512-MQNJ0aTeoa11WQRGhrUW7S2e5KKu3oCHi3vRXKKSBg0U9+5S2yoDfLRVMqMblMN73X2JaB3vlKDuPLWN3HmJTw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFYqA/OFJ/ntPdbclaODrKSd1mBoK0qmDHEUN6pjgIwmAiBxUsNu2i81vBX+UwcbCefnb+hF1l6tOxf9g4YUuq58sQ=="}]},"maintainers":[{"name":"ghosh","email":"mail@ghosh.io"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/microtip-0.0.2.tgz_1492548246511_0.7282167084049433"}},"0.0.3":{"name":"microtip","version":"0.0.3","description":"A modern, ultra light css tooltip library","style":"microtip.css","keywords":["tooltip","css","tooltip"],"author":{"name":"Indrashish Ghosh"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ghosh/microtip.git"},"bugs":{"url":"https://github.com/ghosh/microtip/issues"},"gitHead":"32074fade73622af334c47fbd4eeff495fec82db","homepage":"https://github.com/ghosh/microtip#readme","_id":"microtip@0.0.3","scripts":{},"_shasum":"d2f8aef60e92fe4a3d18d1a47216727497f5ce15","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.6.0","_npmUser":{"name":"ghosh","email":"mail@ghosh.io"},"dist":{"shasum":"d2f8aef60e92fe4a3d18d1a47216727497f5ce15","tarball":"https://registry.npmjs.org/microtip/-/microtip-0.0.3.tgz","integrity":"sha512-G7kzkqjXgDNqihwZx+pckGVMzKq/U6v9A5cIlFz6bjKkHIQeZzGFX72mq/vc5b2l/nPlvhraNeQ8cKscU1kTxA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDyL9TXWmaUz1G7Qxx1WzFvMjCHf06pHnaPQZCDm8UivgIhAPtB+v1IZmpG+ujf7EkFrmtouI+PE0LkD1PZe+7pOdf4"}]},"maintainers":[{"name":"ghosh","email":"mail@ghosh.io"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/microtip-0.0.3.tgz_1492621219814_0.314675907837227"}},"0.1.4":{"name":"microtip","version":"0.1.4","description":"A modern, ultra light css tooltip library. Just 1kb minified and gzipped","style":"microtip.css","keywords":["tooltip","css","css variables","1kb"],"scripts":{"minify":"minify microtip.css","test":"stylelint microtip.css"},"author":{"name":"Indrashish Ghosh"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ghosh/microtip.git"},"bugs":{"url":"https://github.com/ghosh/microtip/issues"},"devDependencies":{"minifier":"^0.8.1","stylelint":"^7.10.1"},"gitHead":"67005566cfcbdddfc7d2b5a1671a44b2f8257ce6","homepage":"https://github.com/ghosh/microtip#readme","_id":"microtip@0.1.4","_shasum":"46f2fb43490f9c403e46284647f10099ea3a30b2","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.6.0","_npmUser":{"name":"ghosh","email":"mail@ghosh.io"},"dist":{"shasum":"46f2fb43490f9c403e46284647f10099ea3a30b2","tarball":"https://registry.npmjs.org/microtip/-/microtip-0.1.4.tgz","integrity":"sha512-7zcjlGfZGzunI5V6gLnQ2cMuvRfmXgRvRaGkRI2UwiAhEyUx1MxpKetWesGI9UWZwOjhnmA6Weflny7gBUILLw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG0rr23Qk4bA32BX+Dpl6sLzzrCdsrHgQr1UqVOOhjdCAiAmUDxJiXC3u4Of9JtnRLEY2aGCYXc38xan9I9B9baG2A=="}]},"maintainers":[{"name":"ghosh","email":"mail@ghosh.io"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/microtip-0.1.4.tgz_1494616601541_0.5960004678927362"}},"0.1.5":{"name":"microtip","version":"0.1.5","description":"A modern, ultra light css tooltip library. Just 1kb minified and gzipped","style":"microtip.css","keywords":["tooltip","css","css variables","1kb"],"scripts":{"minify":"minify microtip.css","test":"stylelint microtip.css"},"author":{"name":"Indrashish Ghosh"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ghosh/microtip.git"},"bugs":{"url":"https://github.com/ghosh/microtip/issues"},"devDependencies":{"minifier":"^0.8.1","stylelint":"^7.10.1"},"gitHead":"6fbb25ab84c2382a1a35d06815cab1c89c35c7f1","homepage":"https://github.com/ghosh/microtip#readme","_id":"microtip@0.1.5","_shasum":"b0b894047bfb038362767e2db9633392c0259f47","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.6.0","_npmUser":{"name":"ghosh","email":"mail@ghosh.io"},"dist":{"shasum":"b0b894047bfb038362767e2db9633392c0259f47","tarball":"https://registry.npmjs.org/microtip/-/microtip-0.1.5.tgz","integrity":"sha512-I6eMdmXs0xtIWvo2ZCfQlNS7D7nbfIchaVjuZPywgCYO5Q/dgfLETT1TOPU1DDNI7SMTdDNlUnF4A4XRxftURA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCG/GWYqnEzlJBQqm2HGElItlSVd8dL3NNcrIO/xe1b1AIgK0KWgGa//vXuuIp0nOcd5dODcA4OZSjSXBoeZ1LoeIg="}]},"maintainers":[{"name":"ghosh","email":"mail@ghosh.io"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/microtip-0.1.5.tgz_1494954261436_0.8998977781739086"}},"0.1.6":{"name":"microtip","version":"0.1.6","description":"A modern, ultra light css tooltip library. Just 1kb minified and gzipped","style":"microtip.css","keywords":["tooltip","css","css variables","1kb"],"scripts":{"minify":"minify microtip.css","test":"stylelint microtip.css"},"author":{"name":"Indrashish Ghosh"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ghosh/microtip.git"},"bugs":{"url":"https://github.com/ghosh/microtip/issues"},"devDependencies":{"minifier":"^0.8.1","stylelint":"^7.10.1"},"gitHead":"e710b81b0ac7c23465e327c62aeedd7fe43100bd","homepage":"https://github.com/ghosh/microtip#readme","_id":"microtip@0.1.6","_shasum":"60b6c2c75f8aa641065f10f7c81cc4f31e33e7f1","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.6.0","_npmUser":{"name":"ghosh","email":"mail@ghosh.io"},"dist":{"shasum":"60b6c2c75f8aa641065f10f7c81cc4f31e33e7f1","tarball":"https://registry.npmjs.org/microtip/-/microtip-0.1.6.tgz","integrity":"sha512-NEvp7qk8ks3BtOk3A6X+ry3WjpLdR973nXwq14rsgk6romGjC8AKVBkHqO5xWr6KReNu1lls1mGOk145fF43UQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICc1Xg/nVCxZZatCI+1lqn/78Al+PfP2RhwiEbxgAWSSAiBo0qeB9jvKUx1uQkP5OLCj6ceRuBDymN+ivmKpHS3BPg=="}]},"maintainers":[{"name":"ghosh","email":"mail@ghosh.io"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/microtip-0.1.6.tgz_1495058310368_0.33075393340550363"}},"0.2.0":{"name":"microtip","version":"0.2.0","description":"A modern, ultra light css tooltip library. Just 1kb minified and gzipped","style":"microtip.css","keywords":["tooltip","css","css variables","1kb"],"scripts":{"minify":"minify microtip.css","test":"stylelint microtip.css"},"author":{"name":"Indrashish Ghosh"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ghosh/microtip.git"},"bugs":{"url":"https://github.com/ghosh/microtip/issues"},"devDependencies":{"minifier":"^0.8.1","stylelint":"^7.10.1"},"gitHead":"d9742bc7346e65af8508c099bfaf56851189e9d1","homepage":"https://github.com/ghosh/microtip#readme","_id":"microtip@0.2.0","_shasum":"b8094023774d9f1fbbcb6a79b60030977bbdbd01","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.6.0","_npmUser":{"name":"ghosh","email":"mail@ghosh.io"},"dist":{"shasum":"b8094023774d9f1fbbcb6a79b60030977bbdbd01","tarball":"https://registry.npmjs.org/microtip/-/microtip-0.2.0.tgz","integrity":"sha512-BlaTt8kOmjqWvkK8mfZvejNMmRhXxot6b/Vn7Cgyvg3lV7RgELeDaS9uFHrA8W+eRO0+E7uhLqF4GRI2JbQQxQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEz5/AlCoNmBWI0nQIBGPmjF7/DhQuawstzlw0UBdLjPAiEAg0q9HUBddsaj4fa7b0xNbN/9zBaPQ5RQURJYut2wRdw="}]},"maintainers":[{"name":"ghosh","email":"mail@ghosh.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/microtip-0.2.0.tgz_1495534284031_0.5918027244042605"}},"0.2.1":{"name":"microtip","version":"0.2.1","description":"A modern, ultra light css tooltip library. Just 1kb minified and gzipped","style":"microtip.css","keywords":["tooltip","css","css variables","1kb"],"scripts":{"minify":"minify microtip.css","test":"stylelint microtip.css"},"author":{"name":"Indrashish Ghosh"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ghosh/microtip.git"},"bugs":{"url":"https://github.com/ghosh/microtip/issues"},"devDependencies":{"minifier":"^0.8.1","stylelint":"^7.10.1"},"main":"index.js","gitHead":"9c9833ab19b359f47186347e5715930ed91c76b2","homepage":"https://github.com/ghosh/microtip#readme","_id":"microtip@0.2.1","_npmVersion":"5.0.3","_nodeVersion":"8.0.0","_npmUser":{"name":"ghosh","email":"mail@ghosh.io"},"dist":{"integrity":"sha512-lV9tWEGzTcOSgcqNwhDyzNxtmG5l1NnzxxQahztcVB8xocA40CSl2ajSiwLSVU8onWiLbm7IFOCmMcsRFEvRLQ==","shasum":"4291520c0e085eecbbb8402335a9e0cecabe5474","tarball":"https://registry.npmjs.org/microtip/-/microtip-0.2.1.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQqa+nGklzUuBzwHB2UN5ms36VXEoU0HV3RymwuYA0xQIhAMkAYF1DuPljj8RdOiLG0rIjZH9nOorVHUNjOUgQojeQ"}]},"maintainers":[{"name":"ghosh","email":"mail@ghosh.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/microtip-0.2.1.tgz_1498477717631_0.8650203081779182"}},"0.2.2":{"name":"microtip","version":"0.2.2","description":"A modern, ultra light css tooltip library. Just 1kb minified and gzipped","style":"microtip.css","keywords":["tooltip","css","css variables","1kb"],"scripts":{"minify":"minify microtip.css","test":"stylelint microtip.css"},"author":{"name":"Indrashish Ghosh"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ghosh/microtip.git"},"bugs":{"url":"https://github.com/ghosh/microtip/issues"},"devDependencies":{"minifier":"^0.8.1","stylelint":"^7.10.1"},"main":"index.js","gitHead":"47bc447b432d8eccd82ba3c42ce7274cd247021e","homepage":"https://github.com/ghosh/microtip#readme","_id":"microtip@0.2.2","_npmVersion":"5.3.0","_nodeVersion":"8.2.1","_npmUser":{"name":"ghosh","email":"mail@ghosh.io"},"dist":{"integrity":"sha512-oah38eH5vSHVFP6yXjbKWOYt92mav++0j3zh844h1vhOscqEg7Rf4agDEIwUTFCcAPPdlhYUQMe6eZfHgD+4oQ==","shasum":"9d9d43cbbf6815d6d16a514abc71c17c5b91d1e9","tarball":"https://registry.npmjs.org/microtip/-/microtip-0.2.2.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCDKwNBkJcZ126ZgZPBCBS2EQAicTcHqslAEsgXtN4ZxgIhALMSWLrjpxP5TUUcbCooxjyiXNXdlN8OMzZwaQ9uZaxU"}]},"maintainers":[{"name":"ghosh","email":"mail@ghosh.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/microtip-0.2.2.tgz_1503054562646_0.3114251918159425"}}},"readme":"<p align=\"center\">\n  <img src=\"https://www.dropbox.com/s/kcn0kccs5bpxhz0/microtip.svg?raw=1\" width=\"180px\">\n</p>\n\n<p align=\"center\">\n  <a href=\"#\">\n    <img src=\"https://img.shields.io/badge/made%20with-love-E760A4.svg\" alt=\"Made with love\">\n  </a>\n  <a href=\"https://opensource.org/licenses/MIT\" target=\"_blank\">\n    <img src=\"https://img.shields.io/badge/license-MIT-green.svg\" alt=\"License\">\n  </a>\n  <a href=\"https://travis-ci.org/ghosh/microtip\" target=\"_blank\">\n    <img src=\"https://api.travis-ci.org/ghosh/microtip.svg\" alt=\"Build Status\">\n  </a>\n</p>\n\n<p align=\"center\">\nModern, minimal css tooptip library with accessibility baked in. Just `1kb` minified and gzipped.\n</p>\n\n---\n\n\n![Microtip](https://www.dropbox.com/s/gracjkb2rca2zj6/microtip.gif?raw=1)\n\n&nbsp;\n## Table of Contents\n- [Installation](#installation)\n- [Setup](#setup)\n- [Usage](#usage)\n- [Customization](#customization)\n\n&nbsp;\n## Installation\n\n**via npm**\n```shell\nnpm install microtip\n```\n\n**via yarn**\n```shell\nyarn add microtip\n```\n\n**via CDN**\n```\nhttps://unpkg.com/microtip/microtip.css\n```\n\n**direct download**\n```shell\ncurl -o microtip https://github.com/ghosh/microtip/blob/master/microtip.css\n```\n\n&nbsp;\n## Setup\n\n**in PostCSS**\n```scss\n@import 'microtip';\n```\n\n**in Webpack**\n```javascript\nimport microtip from 'microtip/microtip.css'\n```\n\n**in SCSS**\n```scss\n@import 'microtip/microtip';\n```\nMake sure, `node_modules` is included in the `includePaths` setting. You can then directly import the library into your file.\n\n&nbsp;\n## Usage\n\nUsing 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:-\n```html\n<button aria-label=\"Hey tooltip!\" data-microtip-position=\"up\" role=\"tooltip\">\n```\n\n### Position Modifiers\n\nYou can change the direction of the tooltip by adding a `data-microtip-position` attribute. The accepted values of this attribute are:- `top`, `top-left`, `top-right`, `bottom`, `bottom-left`, `bottom-right`, `left` and `right`. Example:-\n```html\n<button aria-label=\"Hey tooltip!\" data-microtip-position=\"top-left\" role=\"tooltip\">\n```\n\n### Size Modifiers\n\nBy default, the tooltip will takeup only the size it requires to show the text. You can specify sizes by adding a `data-microtip-size` attribute. The accepted values include `small`, `medium`, `large` and `fit`. Example:-\n```html\n<button aria-label=\"This is a decently long text!\" data-microtip-position=\"top-left\" data-microtip-size=\"medium\" role=\"tooltip\">\n```\n\n**Note** - `fit` sets the width of the tooltip to be the same as the width on the element. It only works along with the `top` and `bottom` position modifiers.\n\n&nbsp;\n## Customization\n\nMicrotip uses **css variables**, which allows you to customize the behavior of the tooltip as per your needs.\n\n\n| Variable                         | Description                                        | Default Value |\n|----------------------------------|----------------------------------------------------|---------------|\n| `--microtip-transition-duration` | Specifies the duration of the tootltip transition  | `.18s`        |\n| `--microtip-transition-delay`    | The delay on hover before showing the tooltip      | `0s`          |\n| `--microtip-transition-easing`   | The easing applied while transitioning the tooltip | `ease-in-out` |\n| `--microtip-font-size`           | Sets the font size of the text in tooltip          | `13px`        |\n| `--microtip-font-weight`         | The font weight of the text in tooltip             | `normal`      |\n| `--microtip-text-transform`      | Controls the casing of the text                    | `none`        |\n\n&nbsp;\n\nExample:-\n```css\n:root {\n --microtip-transition-duration: 0.5s;\n --microtip-transition-delay: 1s;\n --microtip-transition-easing: ease-out;\n --microtip-font-size: 13px;\n --microtip-font-weight: bold;\n --microtip-text-transform: uppercase;\n}\n```\n\nThe above code will cause all the tooltips to transition over `0.5s` while applying an easing of type `ease-out` after a delay of `1s`. The text will be `bold` and `uppercase` and have a font size of `13px`.\n\nYou could also customize the tooltip for individual instances by using a selector more specific than `:root`. Example:-\n\n```css\n.button {\n --microtip-transition-duration: 0.2s;\n --microtip-transition-delay: 0s;\n --microtip-transition-easing: ease-in-out;\n}\n```\n\nThe above code would only affect the tooltips shown on any `button` element.\n\nFor more on css variables see [here](https://css-tricks.com/now-css-custom-properties-thing-value-parts-can-changed-individually/)\n\n\n\n&nbsp;\n## Credits\n- [Claudio Holanda](https://twitter.com/kazzkiq) - Whose work inspired this project\n\n&nbsp;\n\n<p align=\"center\">✌️</p>\n<p align=\"center\">\n<sub><sup>A little project by <a href=\"https://twitter.com/_ighosh\">@i_ghosh</a></sup></sub>\n</p>\n","maintainers":[{"name":"ghosh","email":"mail@ghosh.io"}],"time":{"modified":"2022-06-19T18:54:45.010Z","created":"2017-04-18T20:41:14.125Z","0.0.1":"2017-04-18T20:41:14.125Z","0.0.2":"2017-04-18T20:44:06.791Z","0.0.3":"2017-04-19T17:00:21.655Z","0.1.4":"2017-05-12T19:16:43.908Z","0.1.5":"2017-05-16T17:04:21.689Z","0.1.6":"2017-05-17T21:58:33.371Z","0.2.0":"2017-05-23T10:11:24.180Z","0.2.1":"2017-06-26T11:48:37.728Z","0.2.2":"2017-08-18T11:09:22.781Z"},"keywords":["tooltip","css","css variables","1kb"],"author":{"name":"Indrashish Ghosh"},"license":"MIT","readmeFilename":"README.md","homepage":"https://github.com/ghosh/microtip#readme","repository":{"type":"git","url":"git+https://github.com/ghosh/microtip.git"},"bugs":{"url":"https://github.com/ghosh/microtip/issues"}}