diff --git a/.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee b/.cache/325c8f456729b912b0d2134054eb7448-dfeeb2271cc2857eb0a45a5003c8bbee
deleted file mode 100644
index 7c41cdc9..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":1543343219209},"type":"Object"}
\ No newline at end of file
diff --git a/package.json b/package.json
index 42b70930..db23c8c2 100644
--- a/package.json
+++ b/package.json
@@ -29,13 +29,13 @@
     "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",
     "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/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/Label/label.stories.js b/src/Label/label.stories.js
index e4d3e79a..59946c10 100644
--- a/src/Label/label.stories.js
+++ b/src/Label/label.stories.js
@@ -2,4 +2,79 @@ 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:"   
+            labelType="inline"          
+            tooltipMessage="This is a required field"
+            tooltipPlace="top"     
+            tooltipStyle={{float:"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 />
+            <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/index.jsx b/src/Tooltip/index.jsx
index 5c1b1227..1b6f4ccd 100644
--- a/src/Tooltip/index.jsx
+++ b/src/Tooltip/index.jsx
@@ -1,38 +1,12 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
-import ReactPortalTooltip from "react-portal-tooltip";
-import uniqueId from "lodash/uniqueId";
+import { Tooltip as AccessibleTooltip } from "react-accessible-tooltip";
 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 "";
@@ -57,47 +31,48 @@ 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
-                    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>
+                <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>
+                        );
+                    }}
+                />
             </div>
         );
     }
@@ -112,7 +87,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 +96,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..06c584dd 100644
--- a/src/Tooltip/style.less
+++ b/src/Tooltip/style.less
@@ -1,56 +1,75 @@
 @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;
-            }
-        }
-        &.place-bottom {
-            &:after {
-                border-bottom: 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;
+        left: 50%;
+        transform: translateX(-50%);
+        transition: all 300ms ease-in-out;
+        display:flex;
+        justify-content: center;
+        min-width:200px;
+        z-index:50;
+        visibility: visible;
+        .tooltip-inner{
+            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;
+                border: 16px solid transparent;
+                margin-left: -16px;
+                width: 0;
+                height: 0;
             }
         }
-        &.place-left {
-            &:after {
-                border-left: 6px solid !important;
+        &.top{
+            bottom: 100%;
+            padding-bottom: 16px;
+            ::before{
+                top:100%
             }
         }
-        &.place-right {
-            &:after {
-                border-right: 6px solid !important;
+        &.bottom{
+            top: 100%;
+            padding-top:16px;
+            ::before{
+                bottom:100%;
             }
+        }        
+        
+        &.tooltip-overlay--hidden{
+            opacity:0;
+            pointer-events: none;
+            visibility: hidden;     
         }
-    }
+    } 
     &.error {
         .icon svg {
             color: @alizarinCrimson;
             fill: @alizarinCrimson;
         }
-        .tooltip-text {
-            background-color: @alizarinCrimson !important;
-            color: white;
-            &.place-top {
-                &:after {
-                    border-top-color: @alizarinCrimson !important;
-                }
-            }
-            &.place-bottom {
-                &:after {
-                    border-bottom-color: @alizarinCrimson !important;
-                }
-            }
+        .tooltip-inner{
+            background-color: @alizarinCrimson;
+        }  
+        .top .tooltip-inner::before{
+            border-top-color: @alizarinCrimson;
+        }
+        .bottom .tooltip-inner::before{
+            border-bottom-color: @alizarinCrimson;
         }
     }
     &.warning {
@@ -58,19 +77,14 @@
             color: #EA9C00;
             fill: #EA9C00;
         }
-        .tooltip-text {
-            background-color: #EA9C00 !important;
-            color: white;
-            &.place-top {
-                &:after {
-                    border-top-color: #EA9C00 !important;
-                }
-            }
-            &.place-bottom {
-                &:after {
-                    border-bottom-color: #EA9C00 !important;
-                }
-            }
+        .tooltip-inner{
+            background-color: #EA9C00;
+        }  
+        .top .tooltip-inner::before{
+            border-top-color: #EA9C00;
+        }
+        .bottom .tooltip-inner::before{
+            border-bottom-color: #EA9C00;
         }
     }
     &.info {
@@ -78,19 +92,14 @@
             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: @thunder;
+        }  
+        .top .tooltip-inner::before{
+            border-top-color: @thunder;
+        }
+        .bottom .tooltip-inner::before{
+            border-bottom-color: @thunder;
         }
     }
     &.global {
@@ -98,32 +107,18 @@
             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;
+        }  
+        .top .tooltip-inner::before{
+            border-top-color: @cerulean;
         }
+        .bottom .tooltip-inner::before{
+            border-bottom-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 01fdcdd2..076d4a6f 100644
--- a/src/Tooltip/tooltip.stories.js
+++ b/src/Tooltip/tooltip.stories.js
@@ -1,30 +1,104 @@
-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, width: 20}}>
+    <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, 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"]}
+      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", () => (
+  <div style={{marginTop:250, marginLeft:100, width:20}}>
+    <Tooltip
+      type="info"
+      messages={["This is a longer message but it should be limited to 70px wide"]}
+      rendered={true}
+      tooltipPlace="top"
+      maxWidth={70}
+    />
+  </div>
 ));
+
+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 show on the bottom"]}
+      rendered={true}
+      tooltipPlace="bottom"
+      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>
+        <div style={{width:20}}>
+          <Tooltip
+            type="global"
+            messages={["This tooltip renders dynamically"]}
+            rendered={this.state.rendered}
+            tooltipPlace="top"
+          />
+        </div>
+      </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,
+//   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
diff --git a/yarn.lock b/yarn.lock
index 04f6c912..1ac16f1d 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"
@@ -6905,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"