tooltip added

.eslintrc.js

@@ -129,7 +129,8 @@ module.exports = {
     "react/jsx-no-literals": ["off"],
     "react/jsx-max-depth": ["off"], // rule throws exception in single-dimension-measure
     "react/jsx-filename-extension": ["warn"],
-    "react/prefer-stateless-function": ["warn"]
+    "react/prefer-stateless-function": ["warn"],
+    "react/no-set-state": ["warn"]
   },
   extends: [
     "eslint:all",

src/data-table/data-cell.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ApplyPreMask } from '../masking';
 import { addSeparators } from '../utilities';
-
+import Tooltip from '../tooltip/index.jsx';
 function formatMeasurementValue (measurement, styling) {
   // TODO: measurement.name is a horrible propertyname, it's actually the column header
   const isColumnPercentageBased = measurement.parents.measurement.header.substring(0, 1) === '%';
@@ -61,14 +61,27 @@ function getSemaphoreColors (measurement, semaphoreColors) {
   }
   return semaphoreColors.statusColors.normal;
 }
-
-class DataCell extends React.PureComponent {
+class DataCell extends React.Component {
   constructor (props) {
     super(props);
-
+    this.state = {
+      bool: false,
+      mouseXPosition: 0,
+      mouseYPosition: 0
+    };
+    this.handleEnter = this.handleEnter.bind(this);
+    this.handleLeave = this.handleLeave.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
   }
 
+  shouldComponentUpdate (nextProps, nextState) {
+    const { bool } = this.state;
+    if (bool === nextState.bool) {
+      return false;
+    }
+    return true;
+  }
+
   handleSelect () {
     const { data: { meta: { dimensionCount } }, general: { allowFilteringByClick }, measurement, qlik } = this.props;
     const hasSecondDimension = dimensionCount > 1;
@@ -83,8 +96,26 @@ class DataCell extends React.PureComponent {
     }
   }
 
+  handleEnter (event) {
+    this.setState({ bool: true,
+      mouseXPosition: event.clientX,
+      mouseYPosition: event.clientY });
+  }
+
+  handleLeave () {
+    this.setState({ bool: false });
+  }
+
   render () {
-    const { data, general, measurement, styleBuilder, styling } = this.props;
+    const { bool, mouseXPosition, mouseYPosition } = this.state;
+    const {
+      data,
+      general,
+      measurement,
+      styleBuilder,
+      styling
+    } = this.props;
+
     const isColumnPercentageBased = measurement.name.substring(0, 1) === '%';
     let formattedMeasurementValue = formatMeasurementValue(measurement, styling);
     if (styleBuilder.hasComments()) {
@@ -123,9 +154,18 @@ class DataCell extends React.PureComponent {
       <td
         className={`${cellClass}${general.cellSuffix}`}
         onClick={this.handleSelect}
+        onMouseOut={this.handleLeave}
+        onMouseOver={this.handleEnter}
         style={cellStyle}
       >
         {formattedMeasurementValue}
+        {bool
+          ?
+          <Tooltip
+            data={formattedMeasurementValue}
+            xPosition={mouseXPosition}
+            yPosition={mouseYPosition}
+          /> : null}
       </td>
     );
   }

src/main.less

@@ -2,6 +2,36 @@
   @TableBorder: 1px solid #d3d3d3;
   @KpiTableWidth: 230px;
 
+  .edit-mode{
+    pointer-events: none;
+  }
+  .tooltip-wrapper{
+    position: fixed;
+    padding: 5px;
+    padding-top: 10px;
+  	background-color: #404040;
+  	z-index: 10;
+  	pointer-events: none;
+  	border-radius: 5px;
+    height: 30px;
+    width: auto;
+    opacity: .9;
+    >p{
+      color: #fff;
+    }
+  }
+
+  .tooltip-wrapper::after {
+  	content: "";
+  	position: absolute;
+  	bottom: -10px;
+  	left: 50%;
+  	border-width: 10px 10px 0;
+  	border-style: solid;
+  	border-color: #404040 transparent;
+  	margin-left: -10px;
+  	pointer-events: none;
+  }
   ._cell(@Width: 50px) {
   	min-width: @Width!important;
   	max-width: @Width!important;

src/tooltip/index.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+const getPos = () => {
+  console.log(window.pageXOffset);
+  return {
+    left: window.pageXOffset,
+    top: window.pageYOffset
+  };
+
+};
+
+const Tooltip = ({ data, xPosition, yPosition }) => (
+  <div
+    style={{ "left": `${xPosition - 20}px`,
+      "top": `${yPosition - 75}px` }} className="tooltip-wrapper"
+  >
+    <p>
+      {data}
+    </p>
+  </div>
+);
+Tooltip.propTypes = {
+  data: PropTypes.string.isRequired,
+  xPosition: PropTypes.number,
+  yPosition: PropTypes.number
+};
+export default Tooltip;