From 0904b4c7c5bd3105bd4dcc0f9e9a6116972deb74 Mon Sep 17 00:00:00 2001
From: valadas <info@danielvaladas.com>
Date: Sat, 19 Jan 2019 05:35:42 -0500
Subject: [PATCH 1/9] Adds label and tooltip stories

---
 src/Label/label.stories.js     |  64 +++++++++++++++++-
 src/Tooltip/style.less         |   3 +
 src/Tooltip/tooltip.stories.js | 117 ++++++++++++++++++++++++++-------
 3 files changed, 161 insertions(+), 23 deletions(-)

diff --git a/src/Label/label.stories.js b/src/Label/label.stories.js
index e4d3e79a..64b92fcc 100644
--- a/src/Label/label.stories.js
+++ b/src/Label/label.stories.js
@@ -2,4 +2,66 @@ import React from "react";
 import { storiesOf } from "@storybook/react";
 import Label from "./index";
 
-storiesOf("Label", module).add("with content", () => <Label label="Test" />);
+storiesOf("Label", module).add("simple label", () => 
+    <Label label="Test" />
+);
+
+storiesOf("Label", module).add("with short tooltip", () =>
+    <div style={{paddingTop:100,paddingLeft:100}}>
+        <Label 
+            label="Some field label:" 
+            tooltipMessage="This is a required field"
+            tooltipPlace="top"        
+        />
+    </div>
+);
+
+storiesOf("Label", module).add("with short tooltip on right", () =>
+    <div style={{paddingTop:100,paddingLeft:100}}>
+        <Label 
+            label="Some field label:"             
+            tooltipMessage="This is a required field"
+            tooltipPlace="top"        
+            tooltipStyle={{float:"",display:"inline",position:"relative",top:11}}
+        />
+    </div>
+);
+
+storiesOf("Label", module).add("Reproduces issue", () =>    
+    <div style={{paddingTop:100,paddingLeft:100}}>
+        <p>This case reproduces the issue identified in <br />
+            <a href="https://github.com/dnnsoftware/Dnn.AdminExperience/pull/320">https://github.com/dnnsoftware/Dnn.AdminExperience/pull/320</a><br /> and <br />
+            <a href="https://github.com/romainberger/react-portal-tooltip/issues/84">https://github.com/romainberger/react-portal-tooltip/issues/84</a>
+        </p>
+        <Label 
+            label="Some field label:" 
+            labelType="inline"
+            tooltipMessage={["This is a required field", "it should show as a list", "and be on the bottom right"]}
+            tooltipPlace="top"
+        />
+    </div>
+);
+
+
+
+
+
+// ---------------- Label available props -------------------
+//
+// Label.propTypes = {
+//     label: PropTypes.string,
+//     className: PropTypes.string,
+//     labelFor: PropTypes.string,
+//     tooltipMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+//     tooltipPlace: PropTypes.string,
+//     tooltipStyle: PropTypes.object,
+//     tooltipColor: PropTypes.string,
+//     labelType: PropTypes.oneOf(["inline", "block"]),
+//     style: PropTypes.object,
+//     extra: PropTypes.node,
+//     onClick: PropTypes.func
+// };
+// Label.defaultProps = {
+//     labelType: "block",
+//     className: ""
+// };
\ No newline at end of file
diff --git a/src/Tooltip/style.less b/src/Tooltip/style.less
index 0fc07649..bcab6abf 100644
--- a/src/Tooltip/style.less
+++ b/src/Tooltip/style.less
@@ -1,5 +1,8 @@
 @import "../../styles/index";
 .dnn-ui-common-tooltip {
+    .icon{
+        display:inline;
+    }
     .tooltip-text {
         z-index: 10000;
         max-width: 255px;
diff --git a/src/Tooltip/tooltip.stories.js b/src/Tooltip/tooltip.stories.js
index 01fdcdd2..97fa73e0 100644
--- a/src/Tooltip/tooltip.stories.js
+++ b/src/Tooltip/tooltip.stories.js
@@ -1,30 +1,103 @@
-import React from "react";
+import React, { Component } from "react";
 import { storiesOf } from "@storybook/react";
 import Tooltip from "./index";
 
-storiesOf("Tooltip", module).add("with error", () => (
-  <Tooltip
-    type="error"
-    messages={["Tooltip message"]}
-    rendered={true}
-    tooltipPlace="bottom"
-  />
+storiesOf("Tooltip", module).add("error with only required props", () => (
+  <div style={{marginTop:100, marginLeft:100}}>
+    <Tooltip
+      type="error"
+      messages={["Tooltip message"]}
+      tooltipPlace="top"
+    />
+  </div>
 ));
 
-storiesOf("Tooltip", module).add("with warning", () => (
-  <Tooltip
-    type="warning"
-    messages={["Tooltip message"]}
-    rendered={true}
-    tooltipPlace="bottom"
-  />
+storiesOf("Tooltip", module).add("warning list on bottom", () => (
+  <div style={{marginTop:100, marginLeft:100}}>
+    <Tooltip
+      type="warning"
+      messages={["This tooltip message is longer", "and is an array", "with 3 strings","it shows as a list of items"]}
+      tooltipPlace="bottom"
+    />
+  </div>
 ));
 
-storiesOf("Tooltip", module).add("with info", () => (
-  <Tooltip
-    type="info"
-    messages={["Tooltip message"]}
-    rendered={true}
-    tooltipPlace="bottom"
-  />
+storiesOf("Tooltip", module).add("info with long message and maxWidth on bottom", () => (
+  <div style={{marginTop:100, marginLeft:100}}>
+    <Tooltip
+      type="info"
+      messages={["This is a longer message but it should be limited to 50px wide"]}
+      rendered={true}
+      tooltipPlace="bottom"
+      maxWidth={50}
+    />
+  </div>
 ));
+
+storiesOf("Tooltip", module).add("global setting and delayhide", () => (
+  <div style={{marginTop:100, marginLeft:100}}>
+    <Tooltip
+      type="global"
+      messages={["This tooltip should hide just after 3 seconds of leaving it"]}
+      rendered={true}
+      tooltipPlace="top"
+      delayHide={3000}
+    />
+  </div>
+));
+
+storiesOf("Tooltip", module).add("not rendered", () => (
+  <DynamicRenderedTooltip />
+));
+
+class DynamicRenderedTooltip extends Component {
+  constructor(){
+    super();
+    this.state = {rendered: false};
+  }
+
+  handleToggleRender(){
+    this.setState({rendered: !this.state.rendered});
+  }
+
+  render(){
+    return(
+      <div style={{marginTop:100, marginLeft:100}}>
+        <p>This tooltip should not be rendered until you click the button</p>
+        <button onClick={this.handleToggleRender.bind(this)}>Toggle render of the tootip</button>
+        <Tooltip
+          type="global"
+          messages={["This tooltip renders dynamically"]}
+          rendered={this.state.rendered}
+          tooltipPlace="top"
+        />
+      </div>
+    );
+  }
+}
+
+
+//    ---------- TOOLTIP AVAILABLE PROPS ---------------
+//
+// Tooltip.propTypes = {
+//   messages: PropTypes.array.isRequired,
+//   type: PropTypes.oneOf(["error", "warning", "info", "global"]).isRequired,
+//   rendered: PropTypes.bool,
+//   tooltipPlace: PropTypes.oneOf(["top", "bottom"]).isRequired,
+//   style: PropTypes.object,
+//   tooltipStyle: PropTypes.object,
+//   tooltipColor: PropTypes.string,
+//   className: PropTypes.string,
+//   delayHide: PropTypes.number,
+//   customIcon: PropTypes.node,
+//   tooltipClass: PropTypes.string,
+//   onClick: PropTypes.func,
+//   maxWidth: PropTypes.number
+// };
+
+// Tooltip.defaultProps = {
+//   tooltipPlace: "top",
+//   type: "info",
+//   delayHide: 100,
+//   maxWidth: 400
+// };
\ No newline at end of file

From 2aaf9a02596f452add433f60c6e2b4216979b9f9 Mon Sep 17 00:00:00 2001
From: valadas <info@danielvaladas.com>
Date: Sat, 19 Jan 2019 05:44:01 -0500
Subject: [PATCH 2/9] Reverts unwanted style change

---
 src/Label/label.stories.js | 9 ++++++---
 src/Tooltip/style.less     | 3 ---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/Label/label.stories.js b/src/Label/label.stories.js
index 64b92fcc..1768f586 100644
--- a/src/Label/label.stories.js
+++ b/src/Label/label.stories.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import Label from "./index";
+import { ArrowEndRightIcon } from "../SvgIcons";
 
 storiesOf("Label", module).add("simple label", () => 
     <Label label="Test" />
@@ -19,10 +20,12 @@ storiesOf("Label", module).add("with short tooltip", () =>
 storiesOf("Label", module).add("with short tooltip on right", () =>
     <div style={{paddingTop:100,paddingLeft:100}}>
         <Label 
-            label="Some field label:"             
+            label="Some field label:"   
+            labelType="inline"          
             tooltipMessage="This is a required field"
-            tooltipPlace="top"        
-            tooltipStyle={{float:"",display:"inline",position:"relative",top:11}}
+            tooltipPlace="top"     
+            style={{floar:"left"}}   
+            tooltipStyle={{float:"right"}}
         />
     </div>
 );
diff --git a/src/Tooltip/style.less b/src/Tooltip/style.less
index bcab6abf..0fc07649 100644
--- a/src/Tooltip/style.less
+++ b/src/Tooltip/style.less
@@ -1,8 +1,5 @@
 @import "../../styles/index";
 .dnn-ui-common-tooltip {
-    .icon{
-        display:inline;
-    }
     .tooltip-text {
         z-index: 10000;
         max-width: 255px;

From 54bcff11ab6b2dff7553d21bd582d9a65502a4bc Mon Sep 17 00:00:00 2001
From: valadas <info@danielvaladas.com>
Date: Sat, 19 Jan 2019 05:45:32 -0500
Subject: [PATCH 3/9] reverts unwanted import

---
 src/Label/label.stories.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Label/label.stories.js b/src/Label/label.stories.js
index 1768f586..1a3304e3 100644
--- a/src/Label/label.stories.js
+++ b/src/Label/label.stories.js
@@ -1,7 +1,6 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
 import Label from "./index";
-import { ArrowEndRightIcon } from "../SvgIcons";
 
 storiesOf("Label", module).add("simple label", () => 
     <Label label="Test" />

From a3197546511db8446118e9868057020eaa7eccc7 Mon Sep 17 00:00:00 2001
From: valadas <info@danielvaladas.com>
Date: Sat, 19 Jan 2019 17:40:20 -0500
Subject: [PATCH 4/9] Removes unnecessary float left with typo

---
 src/Label/label.stories.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Label/label.stories.js b/src/Label/label.stories.js
index 1a3304e3..2dde3d7f 100644
--- a/src/Label/label.stories.js
+++ b/src/Label/label.stories.js
@@ -23,7 +23,6 @@ storiesOf("Label", module).add("with short tooltip on right", () =>
             labelType="inline"          
             tooltipMessage="This is a required field"
             tooltipPlace="top"     
-            style={{floar:"left"}}   
             tooltipStyle={{float:"right"}}
         />
     </div>

From 5eacc1b84ad3e879895b8462295dee7e58ac5560 Mon Sep 17 00:00:00 2001
From: valadas <info@danielvaladas.com>
Date: Mon, 21 Jan 2019 19:29:20 -0500
Subject: [PATCH 5/9] started new accessible tooltip

---
 ...054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee |   2 +-
 package.json                                  |   1 +
 src/Label/label.stories.js                    |  12 ++
 src/Tooltip/index.jsx                         |  61 ++++---
 src/Tooltip/style.less                        | 152 +++++++-----------
 src/Tooltip/tooltip.stories.js                |  24 +--
 yarn.lock                                     |   5 +
 7 files changed, 128 insertions(+), 129 deletions(-)

diff --git a/.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee b/.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee
index 7c41cdc9..b6db9a6a 100644
--- a/.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee
+++ b/.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee
@@ -1 +1 @@
-{"value":{"success":true,"data":{"latest":{"version":"4.0.0","info":{"plain":"- upgrade webpack & babel to latest\n- new addParameters and third argument to .add to pass data to addons\n- added the ability to theme storybook\n- improved ui for mobile devices\n- improved performance of addon-knobs"}}},"time":1543343219209},"type":"Object"}
\ No newline at end of file
+{"value":{"success":true,"data":{"latest":{"version":"4.0.0","info":{"plain":"- upgrade webpack & babel to latest\n- new addParameters and third argument to .add to pass data to addons\n- added the ability to theme storybook\n- improved ui for mobile devices\n- improved performance of addon-knobs"}}},"time":1548054039348},"type":"Object"}
\ No newline at end of file
diff --git a/package.json b/package.json
index e74795f3..a9cccaab 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "interact.js": "^1.2.8",
     "moment": "^2.22.2",
     "raw-loader": "0.5.1",
+    "react-accessible-tooltip": "^2.0.3",
     "react-collapse": "^4.0.3",
     "react-custom-scrollbars": "^4.2.1",
     "react-day-picker": "^7.1.10",
diff --git a/src/Label/label.stories.js b/src/Label/label.stories.js
index 2dde3d7f..59946c10 100644
--- a/src/Label/label.stories.js
+++ b/src/Label/label.stories.js
@@ -28,6 +28,18 @@ storiesOf("Label", module).add("with short tooltip on right", () =>
     </div>
 );
 
+storiesOf("Label", module).add("with short tooltip on bottom-right", () =>
+    <div style={{paddingTop:100,paddingLeft:100}}>
+        <Label 
+            label="Some field label:"   
+            labelType="inline"          
+            tooltipMessage="This is a required field"
+            tooltipPlace="bottom"     
+            tooltipStyle={{float:"right"}}
+        />
+    </div>
+);
+
 storiesOf("Label", module).add("Reproduces issue", () =>    
     <div style={{paddingTop:100,paddingLeft:100}}>
         <p>This case reproduces the issue identified in <br />
diff --git a/src/Tooltip/index.jsx b/src/Tooltip/index.jsx
index 5c1b1227..683574a2 100644
--- a/src/Tooltip/index.jsx
+++ b/src/Tooltip/index.jsx
@@ -1,6 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import ReactPortalTooltip from "react-portal-tooltip";
+import { Tooltip as AccessibleTooltip } from "react-accessible-tooltip";
 import uniqueId from "lodash/uniqueId";
 import InfoIcon from "./InfoIcon";
 import ErrorIcon from "./ErrorIcon";
@@ -58,38 +59,50 @@ class Tooltip extends Component {
     constructor() {
         super();
         const id = uniqueId("tooltip-");
-        this.state = {
-            id: id, 
-            active: false
-        };
-    }
-
-    showTooltip() {
-        this.setState({isTooltipActive: true});
-    }
+    }    
 
-    hideTooltip() {
-        this.setState({isTooltipActive: false});
-    }
-    
     render() {
-        const {messages, type, rendered, tooltipPlace, style, className, delayHide, customIcon, tooltipClass, onClick, tooltipColor, maxWidth} = this.props;
+        const {messages, rendered, type, className, style} = this.props;
         const containerClass = "dnn-ui-common-tooltip " + type + " " + (className ? className : "");
         const message = getTooltipText(messages);
-        const TooltipIcon = !customIcon ? getIconComponent(type) : CustomIcon;
+        
 
         if (!message || rendered === false) {
             return <noscript />;
         }
-        const tooltipStyle = this.props.tooltipStyle || getStyle(type, tooltipColor);
         return (
             <div className={containerClass} style={style}>
-                <div id={this.state.id} className="icon" onClick={onClick}
-                    onMouseEnter={this.showTooltip.bind(this)}
-                    onMouseLeave={this.hideTooltip.bind(this)}>
-                    <TooltipIcon icon={customIcon ? customIcon : null} />
-                </div>
-                <ReactPortalTooltip
+                <AccessibleTooltip 
+                    label={props => {  
+                        const {customIcon, type, onClick} = this.props;
+                        const TooltipIcon = !customIcon ? getIconComponent(type) : CustomIcon;
+                        return(
+                            <div className="icon" onClick={onClick} {...props.labelAttributes} >
+                                <TooltipIcon icon={customIcon ? customIcon : null} />
+                            </div>
+                        );
+                    }}
+                    overlay={props => {
+                        const {tooltipPlace, maxWidth} = this.props;
+                        
+                        const classNames = [];
+                        classNames.push("tooltip-overlay");
+                        if (props.isHidden){
+                            classNames.push("tooltip-overlay--hidden");
+                        }
+                        classNames.push(tooltipPlace);
+                        return(
+                            <div
+                                {...props.overlayAttributes}
+                                className={classNames.join(" ")}
+                            >
+                                <div className="tooltip-inner" style={{maxWidth: maxWidth}} dangerouslySetInnerHTML={{__html: message}} />
+                            </div>
+                        );
+                    }}
+                />
+
+                {/* <ReactPortalTooltip
                     style={tooltipStyle}
                     active={this.state.isTooltipActive}
                     position={tooltipPlace}
@@ -97,7 +110,7 @@ class Tooltip extends Component {
                     arrow="center"
                     parent={"#" + this.state.id}>
                     <div style={{maxWidth: maxWidth + "px"}} dangerouslySetInnerHTML={{ __html: message }} />
-                </ReactPortalTooltip>
+                </ReactPortalTooltip> */}
             </div>
         );
     }
@@ -112,7 +125,6 @@ Tooltip.propTypes = {
     tooltipStyle: PropTypes.object,
     tooltipColor: PropTypes.string,
     className: PropTypes.string,
-    delayHide: PropTypes.number,
     customIcon: PropTypes.node,
     tooltipClass: PropTypes.string,
     onClick: PropTypes.func,
@@ -122,7 +134,6 @@ Tooltip.propTypes = {
 Tooltip.defaultProps = {
     tooltipPlace: "top",
     type: "info",
-    delayHide: 100,
     maxWidth: 400
 };
 
diff --git a/src/Tooltip/style.less b/src/Tooltip/style.less
index 0fc07649..4a860ebe 100644
--- a/src/Tooltip/style.less
+++ b/src/Tooltip/style.less
@@ -1,95 +1,80 @@
 @import "../../styles/index";
-.dnn-ui-common-tooltip {
-    .tooltip-text {
-        z-index: 10000;
-        max-width: 255px;
-        text-align: center;
-        padding: 7px 15px;
-        pointer-events: auto !important;
-        word-wrap: break-word;
-        word-break: keep-all;
-        &:hover {
-            visibility: visible !important;
-            opacity: 1 !important;
-        }
-        &.place-top {
-            &:after {
-                border-top: 6px solid !important;
+.dnn-ui-common-tooltip {   
+    >div{
+        position: relative;
+    }    
+    .tooltip-overlay{
+        display: block;
+        font-family: Open Sans,sans-serif;
+        font-weight: 400;
+        font-size: 1rem;
+        position: absolute;
+        bottom: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        padding-bottom: 16px;        
+        transition: all 300ms ease-in-out;
+        display:flex;
+        justify-content: center;
+        min-width:200px;
+        .tooltip-inner{
+            background-color: rgba(0,0,0,0.8);
+            color: #fff;
+            padding:5px 10px;
+            border-radius: 5px;
+            position: relative;
+            &::before{
+                position: absolute;
+                display: block;
+                content: "";
+                left: 50%;
+                right: 0;
+                top: 100%;
+                border: 16px solid transparent;
+                margin-left: -16px;
+                border-top-color: rgba(0,0,0,0.8);
+                width: 0;
+                height: 0;
             }
         }
-        &.place-bottom {
-            &:after {
-                border-bottom: 6px solid !important;
-            }
+        &.tooltip-overlay--hidden{
+            opacity:0;
+            pointer-events: none;
         }
-        &.place-left {
-            &:after {
-                border-left: 6px solid !important;
-            }
-        }
-        &.place-right {
-            &:after {
-                border-right: 6px solid !important;
-            }
-        }
-    }
+    } 
     &.error {
         .icon svg {
             color: @alizarinCrimson;
             fill: @alizarinCrimson;
         }
-        .tooltip-text {
-            background-color: @alizarinCrimson !important;
-            color: white;
-            &.place-top {
-                &:after {
-                    border-top-color: @alizarinCrimson !important;
-                }
+        .tooltip-inner{
+            background-color: @alizarinCrimson;
+            &::before{
+                border-top-color: @alizarinCrimson;
             }
-            &.place-bottom {
-                &:after {
-                    border-bottom-color: @alizarinCrimson !important;
-                }
-            }
-        }
+        }    
     }
     &.warning {
         .icon svg {
             color: #EA9C00;
             fill: #EA9C00;
         }
-        .tooltip-text {
-            background-color: #EA9C00 !important;
-            color: white;
-            &.place-top {
-                &:after {
-                    border-top-color: #EA9C00 !important;
-                }
+        .tooltip-inner{
+            background-color: #EA9C00;
+            &::before{
+                border-top-color: #EA9C00;
             }
-            &.place-bottom {
-                &:after {
-                    border-bottom-color: #EA9C00 !important;
-                }
-            }
-        }
+        } 
     }
     &.info {
         .icon svg {
             color: @alto;
             fill: @alto;
         }
-        .tooltip-text {
-            background-color: @thunder !important;
-            color: white;
-            &.place-top {
-                &:after {
-                    border-top-color: @thunder !important;
-                }
-            }
-            &.place-bottom {
-                &:after {
-                    border-bottom-color: @thunder !important;
-                }
+        .tooltip-inner{
+            background-color: @alto;
+            &::before{
+                border-top-color: @alto ;
             }
         }
     }
@@ -98,32 +83,15 @@
             color: @cerulean;
             fill: @cerulean;
         }
-        .tooltip-text {
-            background-color: @cerulean !important;
-            color: white;
-            &.place-top {
-                &:after {
-                    border-top-color: @cerulean !important;
-                }
-            }
-            &.place-bottom {
-                &:after {
-                    border-bottom-color: @cerulean !important;
-                }
+        .tooltip-inner{
+            background-color: @cerulean;
+            &::before{
+                border-top-color: @cerulean ;
             }
-        }
+        }     
     }
     .icon svg {
         width: 20px;
         height: 20px;
-    }
-}
-
-.ToolTipPortal {
-    & > div {
-        z-index: 9999999 !important;
-    }
-    span {
-        margin-top: 1px !important;
-    }
+    }    
 }
\ No newline at end of file
diff --git a/src/Tooltip/tooltip.stories.js b/src/Tooltip/tooltip.stories.js
index 97fa73e0..9c099f1b 100644
--- a/src/Tooltip/tooltip.stories.js
+++ b/src/Tooltip/tooltip.stories.js
@@ -3,7 +3,7 @@ import { storiesOf } from "@storybook/react";
 import Tooltip from "./index";
 
 storiesOf("Tooltip", module).add("error with only required props", () => (
-  <div style={{marginTop:100, marginLeft:100}}>
+  <div style={{marginTop:100, marginLeft:100, width: 20}}>
     <Tooltip
       type="error"
       messages={["Tooltip message"]}
@@ -13,7 +13,7 @@ storiesOf("Tooltip", module).add("error with only required props", () => (
 ));
 
 storiesOf("Tooltip", module).add("warning list on bottom", () => (
-  <div style={{marginTop:100, marginLeft:100}}>
+  <div style={{marginTop:100, marginLeft:100, width:20}}>
     <Tooltip
       type="warning"
       messages={["This tooltip message is longer", "and is an array", "with 3 strings","it shows as a list of items"]}
@@ -23,7 +23,7 @@ storiesOf("Tooltip", module).add("warning list on bottom", () => (
 ));
 
 storiesOf("Tooltip", module).add("info with long message and maxWidth on bottom", () => (
-  <div style={{marginTop:100, marginLeft:100}}>
+  <div style={{marginTop:100, marginLeft:100, width:20}}>
     <Tooltip
       type="info"
       messages={["This is a longer message but it should be limited to 50px wide"]}
@@ -35,7 +35,7 @@ storiesOf("Tooltip", module).add("info with long message and maxWidth on bottom"
 ));
 
 storiesOf("Tooltip", module).add("global setting and delayhide", () => (
-  <div style={{marginTop:100, marginLeft:100}}>
+  <div style={{marginTop:100, marginLeft:100, width:20}}>
     <Tooltip
       type="global"
       messages={["This tooltip should hide just after 3 seconds of leaving it"]}
@@ -62,15 +62,17 @@ class DynamicRenderedTooltip extends Component {
 
   render(){
     return(
-      <div style={{marginTop:100, marginLeft:100}}>
+      <div style={{marginTop:100, marginLeft:100,}}>
         <p>This tooltip should not be rendered until you click the button</p>
         <button onClick={this.handleToggleRender.bind(this)}>Toggle render of the tootip</button>
-        <Tooltip
-          type="global"
-          messages={["This tooltip renders dynamically"]}
-          rendered={this.state.rendered}
-          tooltipPlace="top"
-        />
+        <div style={{width:20}}>
+          <Tooltip
+            type="global"
+            messages={["This tooltip renders dynamically"]}
+            rendered={this.state.rendered}
+            tooltipPlace="top"
+          />
+        </div>
       </div>
     );
   }
diff --git a/yarn.lock b/yarn.lock
index 5df6b811..99462284 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6762,6 +6762,11 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-accessible-tooltip@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/react-accessible-tooltip/-/react-accessible-tooltip-2.0.3.tgz#d676f23fda74c1df5733834869d27722a2649331"
+  integrity sha512-T/QPT8qBrrco+E8KQUuhtQAv46/B3Xpf+adLkKA2bofE/9db2wSaqr6XOlxO/Rx59dqt2V844kxrmT7WA2Q9kw==
+
 react-addons-test-utils@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/react-addons-test-utils/-/react-addons-test-utils-15.6.2.tgz#c12b6efdc2247c10da7b8770d185080a7b047156"

From a9735ca72d05e24a5e9cb80f87c39b32d36403d6 Mon Sep 17 00:00:00 2001
From: valadas <info@danielvaladas.com>
Date: Tue, 22 Jan 2019 11:19:51 -0500
Subject: [PATCH 6/9] Implemented new accessible tooltip

---
 src/Checkbox/checkbox.stories.js | 32 +++++++++++++++
 src/Tooltip/index.jsx            | 38 ------------------
 src/Tooltip/style.less           | 69 ++++++++++++++++++++++----------
 src/Tooltip/tooltip.stories.js   | 17 ++++----
 4 files changed, 88 insertions(+), 68 deletions(-)

diff --git a/src/Checkbox/checkbox.stories.js b/src/Checkbox/checkbox.stories.js
index 128f2852..0f4e0bb7 100644
--- a/src/Checkbox/checkbox.stories.js
+++ b/src/Checkbox/checkbox.stories.js
@@ -10,3 +10,35 @@ storiesOf("Checkbox", module).add("with text", () => (
 storiesOf("Checkbox", module).add("already checked", () => (
   <Checkbox value={true} onChange={action("changed")} label="I should be pre-checked" />
 ));
+
+storiesOf("Checkbox", module).add("with label and tooltip", () => (
+  <Checkbox 
+    value={false} 
+    onChange={action("changed")} 
+    label="I have a tooltip that opens on the bottom" 
+    tooltipMessage="This is the tooltip of the checkbox"
+    tooltipPlace="bottom"  
+  />
+))
+
+
+
+// -------- CHECKBOX AVAILABLE PROPS -------------
+
+// Checkbox.propTypes = {
+//   value: PropTypes.bool.isRequired,
+//   labelPlace: PropTypes.oneOf(["left", "right"]),
+//   size: PropTypes.number,
+//   checkBoxStyle: PropTypes.object,
+//   label: PropTypes.string,
+//   onChange: PropTypes.func,
+//   enabled: PropTypes.bool,
+//   tooltipMessage: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+//   tooltipPlace: PropTypes.string
+// };
+
+// Checkbox.defaultProps = {
+//   enabled: true,
+//   size: 13,
+//   labelPlace: "right"
+// };
\ No newline at end of file
diff --git a/src/Tooltip/index.jsx b/src/Tooltip/index.jsx
index 683574a2..1b6f4ccd 100644
--- a/src/Tooltip/index.jsx
+++ b/src/Tooltip/index.jsx
@@ -1,39 +1,12 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import ReactPortalTooltip from "react-portal-tooltip";
 import { Tooltip as AccessibleTooltip } from "react-accessible-tooltip";
-import uniqueId from "lodash/uniqueId";
 import InfoIcon from "./InfoIcon";
 import ErrorIcon from "./ErrorIcon";
 import GlobalIcon from "./GlobalIcon";
 import CustomIcon from "./CustomIcon";
 import "./style.less";
 
-const colors = {
-    error: "#EA2134",
-    warning: "#EA9C00",
-    info: "#4b4e4f",
-    global: "#21A3DA"
-};
-
-function getStyle(type, _color) {
-    const color = _color || colors[type];
-    return {
-        style: {
-            background: color,
-            color: "white",
-            padding: "10px 20px",
-            transition: "opacity 0.2s ease-in-out, visibility 0.2s ease-in-out",
-            boxShadow: "none",
-            fontFamily: "'proxima_nova', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif"
-        },
-        arrowStyle: {
-            color,
-            borderColor: false
-        }
-    };
-}
-
 const getTooltipText = function (messages) {
     if (!messages || !messages.length) {
         return "";
@@ -58,7 +31,6 @@ class Tooltip extends Component {
 
     constructor() {
         super();
-        const id = uniqueId("tooltip-");
     }    
 
     render() {
@@ -101,16 +73,6 @@ class Tooltip extends Component {
                         );
                     }}
                 />
-
-                {/* <ReactPortalTooltip
-                    style={tooltipStyle}
-                    active={this.state.isTooltipActive}
-                    position={tooltipPlace}
-                    tooltipTimeout={delayHide}
-                    arrow="center"
-                    parent={"#" + this.state.id}>
-                    <div style={{maxWidth: maxWidth + "px"}} dangerouslySetInnerHTML={{ __html: message }} />
-                </ReactPortalTooltip> */}
             </div>
         );
     }
diff --git a/src/Tooltip/style.less b/src/Tooltip/style.less
index 4a860ebe..19558f50 100644
--- a/src/Tooltip/style.less
+++ b/src/Tooltip/style.less
@@ -9,37 +9,52 @@
         font-weight: 400;
         font-size: 1rem;
         position: absolute;
-        bottom: 100%;
         left: 50%;
         transform: translateX(-50%);
-        padding-bottom: 16px;        
         transition: all 300ms ease-in-out;
         display:flex;
         justify-content: center;
         min-width:200px;
+        z-index:50;
+        visibility: visible;
         .tooltip-inner{
-            background-color: rgba(0,0,0,0.8);
+            background-color: rgb(75, 78, 79);
             color: #fff;
             padding:5px 10px;
             border-radius: 5px;
             position: relative;
+            font-family: proxima_nova, HelveticaNeue, 'Helvetica Neue', Helvetica, Arial, sans-serif;
             &::before{
                 position: absolute;
                 display: block;
                 content: "";
                 left: 50%;
                 right: 0;
-                top: 100%;
                 border: 16px solid transparent;
                 margin-left: -16px;
-                border-top-color: rgba(0,0,0,0.8);
                 width: 0;
                 height: 0;
             }
         }
+        &.top{
+            bottom: 100%;
+            padding-bottom: 16px;
+            ::before{
+                top:100%
+            }
+        }
+        &.bottom{
+            top: 100%;
+            padding-top:16px;
+            ::before{
+                bottom:100%;
+            }
+        }        
+        
         &.tooltip-overlay--hidden{
             opacity:0;
             pointer-events: none;
+            visibility: hidden;     
         }
     } 
     &.error {
@@ -49,10 +64,13 @@
         }
         .tooltip-inner{
             background-color: @alizarinCrimson;
-            &::before{
-                border-top-color: @alizarinCrimson;
-            }
-        }    
+        }  
+        .top .tooltip-inner::before{
+            border-top-color: @alizarinCrimson;
+        }
+        .bottom .tooltip-inner::before{
+            border-bottom-color: @alizarinCrimson;
+        }
     }
     &.warning {
         .icon svg {
@@ -61,10 +79,13 @@
         }
         .tooltip-inner{
             background-color: #EA9C00;
-            &::before{
-                border-top-color: #EA9C00;
-            }
-        } 
+        }  
+        .top .tooltip-inner::before{
+            border-top-color: #EA9C00;
+        }
+        .bottom .tooltip-inner::before{
+            border-bottom-color: #EA9C00;
+        }
     }
     &.info {
         .icon svg {
@@ -72,10 +93,13 @@
             fill: @alto;
         }
         .tooltip-inner{
-            background-color: @alto;
-            &::before{
-                border-top-color: @alto ;
-            }
+            background-color: rgb(75, 78, 79);
+        }  
+        .top .tooltip-inner::before{
+            border-top-color: rgb(75, 78, 79);;
+        }
+        .bottom .tooltip-inner::before{
+            border-bottom-color: rgb(75, 78, 79);;
         }
     }
     &.global {
@@ -85,10 +109,13 @@
         }
         .tooltip-inner{
             background-color: @cerulean;
-            &::before{
-                border-top-color: @cerulean ;
-            }
-        }     
+        }  
+        .top .tooltip-inner::before{
+            border-top-color: @cerulean;
+        }
+        .bottom .tooltip-inner::before{
+            border-bottom-color: @cerulean;
+        }   
     }
     .icon svg {
         width: 20px;
diff --git a/src/Tooltip/tooltip.stories.js b/src/Tooltip/tooltip.stories.js
index 9c099f1b..076d4a6f 100644
--- a/src/Tooltip/tooltip.stories.js
+++ b/src/Tooltip/tooltip.stories.js
@@ -22,25 +22,25 @@ storiesOf("Tooltip", module).add("warning list on bottom", () => (
   </div>
 ));
 
-storiesOf("Tooltip", module).add("info with long message and maxWidth on bottom", () => (
-  <div style={{marginTop:100, marginLeft:100, width:20}}>
+storiesOf("Tooltip", module).add("info with long message and maxWidth", () => (
+  <div style={{marginTop:250, marginLeft:100, width:20}}>
     <Tooltip
       type="info"
-      messages={["This is a longer message but it should be limited to 50px wide"]}
+      messages={["This is a longer message but it should be limited to 70px wide"]}
       rendered={true}
-      tooltipPlace="bottom"
-      maxWidth={50}
+      tooltipPlace="top"
+      maxWidth={70}
     />
   </div>
 ));
 
-storiesOf("Tooltip", module).add("global setting and delayhide", () => (
+storiesOf("Tooltip", module).add("global setting and positioned on the bottom", () => (
   <div style={{marginTop:100, marginLeft:100, width:20}}>
     <Tooltip
       type="global"
-      messages={["This tooltip should hide just after 3 seconds of leaving it"]}
+      messages={["This tooltip should show on the bottom"]}
       rendered={true}
-      tooltipPlace="top"
+      tooltipPlace="bottom"
       delayHide={3000}
     />
   </div>
@@ -90,7 +90,6 @@ class DynamicRenderedTooltip extends Component {
 //   tooltipStyle: PropTypes.object,
 //   tooltipColor: PropTypes.string,
 //   className: PropTypes.string,
-//   delayHide: PropTypes.number,
 //   customIcon: PropTypes.node,
 //   tooltipClass: PropTypes.string,
 //   onClick: PropTypes.func,

From 35b7fa37ed84ae733229a682cbe86cf0af8395f5 Mon Sep 17 00:00:00 2001
From: valadas <info@danielvaladas.com>
Date: Tue, 22 Jan 2019 11:46:13 -0500
Subject: [PATCH 7/9] deleted cache file

---
 ...8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 .cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee

diff --git a/.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee b/.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee
deleted file mode 100644
index b6db9a6a..00000000
--- a/.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee
+++ /dev/null
@@ -1 +0,0 @@
-{"value":{"success":true,"data":{"latest":{"version":"4.0.0","info":{"plain":"- upgrade webpack & babel to latest\n- new addParameters and third argument to .add to pass data to addons\n- added the ability to theme storybook\n- improved ui for mobile devices\n- improved performance of addon-knobs"}}},"time":1548054039348},"type":"Object"}
\ No newline at end of file

From 6765b1b01925e2050fc56c01e7426dda02df4af4 Mon Sep 17 00:00:00 2001
From: valadas <info@danielvaladas.com>
Date: Tue, 22 Jan 2019 11:52:04 -0500
Subject: [PATCH 8/9] removed now unused react-portal-tooltip

---
 package.json | 1 -
 yarn.lock    | 5 -----
 2 files changed, 6 deletions(-)

diff --git a/package.json b/package.json
index 83724ee6..db23c8c2 100644
--- a/package.json
+++ b/package.json
@@ -36,7 +36,6 @@
     "react-height": "^3.0.0",
     "react-modal": "^3.5.1",
     "react-motion": "^0.5.2",
-    "react-portal-tooltip": "^2.4.3",
     "react-scrollbar": "^0.5.4",
     "react-slider": "0.11.2",
     "react-tabs": "2.3.0",
diff --git a/yarn.lock b/yarn.lock
index 9cf5b874..1ac16f1d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6910,11 +6910,6 @@ react-motion@^0.5.2:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
-react-portal-tooltip@^2.4.3:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/react-portal-tooltip/-/react-portal-tooltip-2.4.3.tgz#02a61b87b0fb5404eb6326342dbae0f94ccd94f4"
-  integrity sha512-XQ6gRJ3ZT8gUDOgNa03n0gw1d/soO7azqR85yvrb4pB8DLv74UM0HGsYpCIaY8M5ilSafIh1YU8N8v0uoljhxg==
-
 react-scrollbar@^0.5.4:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/react-scrollbar/-/react-scrollbar-0.5.4.tgz#270576a28d0f7783b2304b284dbd38d82b36b0e0"

From da5f935f1b292f0a53ded8628213ff1924e69d8e Mon Sep 17 00:00:00 2001
From: valadas <info@danielvaladas.com>
Date: Tue, 22 Jan 2019 11:56:30 -0500
Subject: [PATCH 9/9] replaced rgb color by its name

---
 src/Tooltip/style.less | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/Tooltip/style.less b/src/Tooltip/style.less
index 19558f50..06c584dd 100644
--- a/src/Tooltip/style.less
+++ b/src/Tooltip/style.less
@@ -93,13 +93,13 @@
             fill: @alto;
         }
         .tooltip-inner{
-            background-color: rgb(75, 78, 79);
+            background-color: @thunder;
         }  
         .top .tooltip-inner::before{
-            border-top-color: rgb(75, 78, 79);;
+            border-top-color: @thunder;
         }
         .bottom .tooltip-inner::before{
-            border-bottom-color: rgb(75, 78, 79);;
+            border-bottom-color: @thunder;
         }
     }
     &.global {