updated readme

meinstein · Jun 24, 2017 · 35364c8 · 35364c8
1 parent 389f3ea
commit 35364c8
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -26,7 +26,28 @@ const MyComponent = () => (
 
 Wrap any element with a Tooltip and it will automatically position itself to either the top, right, bottom, or left based on where in the viewport its child element is rendered.
 
-## Types
+## TooltipContainer
 
-- `info`: (*default*) A standard tooltip with a small caret.
-- `dialog`: A sleek, caret-less tooltip with a white background & slight box shadow.
+#### Props
+|   name         |     default    |    description                                                    |
+|----------------|----------------|-------------------------------------------------------------------|
+| padding        |        16px    | Minimum padding between edge of viewport and tooltip              |
+| offset         |        8px     | Offset between the tooltip and the tooltip's child                |
+| caretSize      |        5px     | Size of the tooltip's caret                                       |
+
+## Tooltip
+
+#### Type (prop)
+
+|   name         |     default    |    description                                                    |
+|----------------|----------------|-------------------------------------------------------------------|
+| info           |       ✘        | A standard tooltip with a small caret                             |
+| dialog         |                | A caret-less tooltip with a white background                      |
+
+#### Other props
+
+|   name         |     default    |    description                                                    |
+|----------------|----------------|-------------------------------------------------------------------|
+| text           |        ""      | The text to render inside the tooltip                             |
+| style          |        {}      | Pass any positioning style, etc here                              |
+| tooltipStyles  |        {}      | Change aspects of the tooltip's style                             |
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-autotip",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A variety of simple auto-positioning tooltips",
   "main": "index.js",
   "module": "lib/index.js",
@@ -62,7 +62,7 @@
     "testRegex": "(/src/.*test\\.js)$",
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/config/__mocks__/fileMock.js",
-      "\\.(css|less)$": "<rootDir>/config/__mocks__/styleMock.js"
+      "\\.(css|scss)$": "<rootDir>/config/__mocks__/styleMock.js"
     },
     "modulePaths": [
       "<rootDir>/src"

diff --git a/src/TooltipContainer/styles.scss b/src/TooltipContainer/styles.scss
@@ -1,13 +1,12 @@
-// VARIABLES
+// variables
 $duration: 600ms;
 $offset: 4px;
 
 .react-autotip-hidden {
   opacity: 0;
 }
 
-
-// TOP //
+// pos = TOP //
 .react-autotip-active-top {
   animation-name: react-autotip-top-kf;
   animation-duration: $duration;
@@ -31,7 +30,7 @@ $offset: 4px;
 // ------------------------ //
 
 
-// BOTTOM //
+// pos = BOTTOM //
 .react-autotip-active-bottom {
   animation-name: react-autotip-bottom-kf;
   animation-duration: $duration;
@@ -55,7 +54,7 @@ $offset: 4px;
 // ------------------------ //
 
 
-// LEFT //
+// pos = LEFT //
 .react-autotip-active-left {
   animation-name: react-autotip-left-kf;
   animation-duration: $duration;
@@ -79,7 +78,7 @@ $offset: 4px;
 // ------------------------ //
 
 
-// RIGHT //
+// pos = RIGHT //
 .react-autotip-active-right {
   animation-name: react-autotip-right-kf;
   animation-duration: $duration;