tooltip position now follow the mouse

.eslintrc.js

@@ -116,7 +116,7 @@ module.exports = {
     "max-params": ["warn"],
     "brace-style": ["warn", "1tbs", { "allowSingleLine": true }],
     "prefer-const": ["warn"],
-
+    "class-methods-use-this":["warn"],
     // plugin:react
     "react/jsx-indent": ["warn", 2],
     "react/jsx-indent-props": ["warn", 2],

src/main.less

@@ -7,7 +7,7 @@
   }
   .tooltip-wrapper{
     min-width: 25px;
-    position: absolute;
+    position: fixed;
     padding: 5px;
     padding-top: 15px;
   	background-color: #404040;
@@ -18,10 +18,6 @@
     width: auto;
     opacity: .9;
     text-align: center;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    transform: translate(0,-70%);
     >p{
       color: #fff;
     }

src/tooltip/index.jsx

@@ -7,6 +7,7 @@ class Tooltip extends React.Component {
       showTooltip: false
     };
     this.handleRenderTooltip = this.handleRenderTooltip.bind(this);
+    this.handleCalculateTooltipPosition = this.handleCalculateTooltipPosition.bind(this);
   }
 
   shouldComponentUpdate (nextProps, nextState) {
@@ -22,12 +23,23 @@ class Tooltip extends React.Component {
     this.setState({ showTooltip: !showTooltip });
   }
 
+  handleCalculateTooltipPosition (event) {
+    const tooltipClassName = 'tooltip-wrapper';
+    let tooltip = document.getElementsByClassName(tooltipClassName);
+    const xPositionOffset = 25;
+    const yPositionOffset = 65;
+
+    tooltip[0].style.left = event.clientX - xPositionOffset + 'px';
+    tooltip[0].style.top = event.clientY - yPositionOffset + 'px';
+  }
+
   render () {
     const { children, tooltipText, isTooltipActive } = this.props;
     const { showTooltip } = this.state;
 
     return (
       <div
+        onMouseMove={this.handleCalculateTooltipPosition}
         onMouseOut={this.handleRenderTooltip}
         onMouseOver={this.handleRenderTooltip}
       >