html-hint - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

package.json

 {
   "name": "html-hint",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "description": "css hint based on hint.css with html content support",
@@ -33,3 +33,3 @@ "main": "html-hint-cc.sass",
     "babel-cli": "^6.4.5",
-    "babel-eslint": "^4.1.8",
+    "babel-eslint": "^5.0.0",
     "babel-polyfill": "^6.5.0",
@@ -43,11 +43,10 @@ "babel-preset-es2015": "^6.3.13",
     "css-loader": "^0.23.1",
-    "eslint": "^1.10.3",
-    "eslint-config-airbnb": "^4.0.0",
-    "eslint-plugin-react": "^3.16.1",
+    "eslint": "^2.2.0",
+    "eslint-config-airbnb": "^6.0.2",
+    "eslint-plugin-react": "^4.0.0",
     "file-loader": "^0.8.5",
     "github-markdown-css": "^2.2.1",
     "highlight.js": "^9.1.0",
-    "kotatsu": "^0.10.0",
+    "kotatsu": "^0.11.0",
     "lodash": "^4.3.0",
-    "markdown-it": "^5.1.0",
     "node-sass": "^3.4.2",
@@ -58,5 +57,6 @@ "normalize.css": "^3.0.3",
     "react": "^0.14.7",
+    "react-components-markdown": "^0.1.1",
     "react-dom": "^0.14.7",
     "react-motion": "^0.4.2",
-    "recompose": "^0.14.5",
+    "recompose": "^0.15.0",
     "rimraf": "^2.5.1",
@@ -63,0 +63,0 @@ "sass-loader": "^3.1.2",

README.md

@@ -1,2 +0,3 @@
-## html-hint 
+## HTML HINT
+
 *based on [hint.css](https://github.com/chinchang/hint.css) with html content support*
@@ -7,5 +8,97 @@
 
-### Examples and documentation
-See [example](http://istarkov.github.io/html-hint/)
+#### Example
 
+[Base, click to view](http://istarkov.github.io/html-hint/#exampleMain)
+
+### Install
+
+```bash
+npm install --save html-hint
+```
+
+### Usage
+
+```html
+<div class="hint--html hint--top">
+  Place here any element
+  <div class="hint__content">
+    Place here your tooltip HTML content
+  <div>
+</div>
+```
+
+If you are prefer to use css-modules you can use composes
+
+```html
+<div class={styles.myClass}>
+  Place here any element
+  <div class={styles.myTooltip}>
+    Place here your tooltip HTML content
+  <div>
+</div>
+```
+
+```scss
+@import 'html-hint'
+
+.myClass
+  composes: hint--html
+  composes: hint--top
+  composes: hint--info
+  cursor: pointer
+
+.myTooltip
+  composes: hint__content
+```
+
+There are different placement options
+- `hint--top-left`, `hint--top`, `hint--top-right`;
+- `hint--left`, `hint--right`,
+- `hint--bottom-left`, `hint--bottom`, `hint--bottom-right`,
+
+And different type options
+- `hint--warning`, `hint--error`, `hint--info`, `hint--success`
+
+(_To change color you can also use mixin_)
+
+```scss
+.myClass
+  composes: hint--html
+  composes: hint--top
+  @include hint-color(yellow)
+  cursor: pointer
+```
+
+#### Placement options example
+
+[Base, click to view](http://istarkov.github.io/html-hint/#exampleMain)
+
+---
+
+By default tootips are not hoverable, adding `hint--hoverable` class makes them hoverable.
+
+```html
+<div class="hint--html hint--top hint--hoverable">
+  Place here any element
+  <div class="hint__content">
+    Place here your tooltip HTML content
+  <div>
+</div>
+```
+
+#### Hoverable example
+
+[Hoverable example, click to view](http://istarkov.github.io/html-hint/#exampleHoverable)
+
+Sometimes you need to set hover by yourself.
+
+Using `hint--always` class you will make tooltip always visible,
+using `hint--hidden` you will prevent tooltip to show.
+
+(_both hint--always and hint--hidden will hide tooltip on hover_)
+
+#### hint--always example
+
+[Always example, click to view](http://istarkov.github.io/html-hint/#exampleAlways)
+
 ### Contribute
@@ -16,6 +109,7 @@
 npm run start
-# open http://localhost:4000 and you will get hot reloadable env 
+# open http://localhost:4000 and you will get hot reloadable env
 ```
 
 ### License
+
 MIT (http://www.opensource.org/licenses/mit-license.php)

No alert changes

Improved metrics

Total package byte prevSize

903556

increased by0.66%

Number of lines in readme file

114

increased by470%

Worsened metrics

Lines of code

4209

decreased by-0.31%

No dependency changes