all logic for tooltip has been moved to it's component

data-cell & column-header components reseted to pure ones

src/data-table/data-cell.jsx

@@ -61,25 +61,12 @@ function getSemaphoreColors (measurement, semaphoreColors) {
   }
   return semaphoreColors.statusColors.normal;
 }
-class DataCell extends React.Component {
+class DataCell extends React.PureComponent {
   constructor (props) {
     super(props);
-    this.state = {
-      showTooltip: false
-    };
-    this.handleEnter = this.handleEnter.bind(this);
-    this.handleLeave = this.handleLeave.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    const { showTooltip } = this.state;
-    if (showTooltip === nextState.showTooltip) {
-      return false;
-    }
-    return true;
-  }
-
   handleSelect () {
     const { data: { meta: { dimensionCount } }, general: { allowFilteringByClick }, measurement, qlik } = this.props;
     const hasSecondDimension = dimensionCount > 1;
@@ -94,16 +81,7 @@ class DataCell extends React.Component {
     }
   }
 
-  handleEnter () {
-    this.setState({ showTooltip: true });
-  }
-
-  handleLeave () {
-    this.setState({ showTooltip: false });
-  }
-
   render () {
-    const { showTooltip } = this.state;
     const {
       data,
       general,
@@ -157,16 +135,14 @@ class DataCell extends React.Component {
       <td
         className={`${cellClass}${general.cellSuffix}`}
         onClick={this.handleSelect}
-        onMouseOut={this.handleLeave}
-        onMouseOver={this.handleEnter}
         style={cellStyle}
       >
-        {formattedMeasurementValue}
-        {showTooltip && !inEditState && formattedMeasurementValue !== '.'
-          ?
-          <Tooltip>
-            {formattedMeasurementValue}
-          </Tooltip> : null}
+        <Tooltip
+          isTooltipActive={!inEditState}
+          tooltipText={formattedMeasurementValue}
+        >
+          {formattedMeasurementValue}
+        </Tooltip>
       </td>
     );
   }

src/headers-table/column-header.jsx

@@ -2,41 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Tooltip from '../tooltip/index.jsx';
 
-class ColumnHeader extends React.Component {
+class ColumnHeader extends React.PureComponent {
   constructor (props) {
     super(props);
-    this.state = {
-      showTooltip: false
-    };
-    this.handleEnter = this.handleEnter.bind(this);
-    this.handleLeave = this.handleLeave.bind(this);
     this.handleSelect = this.handleSelect.bind(this);
   }
 
-  shouldComponentUpdate (nextProps, nextState) {
-    const { showTooltip } = this.state;
-    if (showTooltip === nextState.showTooltip) {
-      return false;
-    }
-    return true;
-  }
-
   handleSelect () {
     const { entry, qlik } = this.props;
     qlik.backendApi.selectValues(1, [entry.elementNumber], true);
   }
 
-  handleEnter () {
-    this.setState({ showTooltip: true });
-  }
-
-  handleLeave () {
-    this.setState({ showTooltip: false });
-  }
-
   render () {
     const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props;
-    const { showTooltip } = this.state;
     const inEditState = qlik.inEditState();
 
     const style = {
@@ -51,16 +29,14 @@ class ColumnHeader extends React.Component {
         className={`grid-cells2${cellSuffix}`}
         colSpan={colSpan}
         onClick={this.handleSelect}
-        onMouseOut={this.handleLeave}
-        onMouseOver={this.handleEnter}
         style={style}
       >
-        {entry.displayValue}
-        {showTooltip && !inEditState
-          ?
-          <Tooltip>
-            {entry.displayValue}
-          </Tooltip> : null}
+        <Tooltip
+          isTooltipActive={!inEditState}
+          tooltipText={entry.displayValue}
+        >
+          {entry.displayValue}
+        </Tooltip>
       </th>
     );
   }

src/tooltip/index.jsx

@@ -1,22 +1,66 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+class Tooltip extends React.Component {
+  constructor (props) {
+    super(props);
+    this.state = {
+      showTooltip: false,
+      xPosition: 0,
+      yPosition: 0
+    };
+    this.handleRenderTooltip = this.handleRenderTooltip.bind(this);
+  }
 
-const Tooltip = ({ children }) => {
-  const xPosition = event.clientX;
-  const yPosition = event.clientY;
-  return (
-    <div
-      className="tooltip-wrapper"
-      style={{ 'left': `${xPosition - 20}px`,
-        'top': `${yPosition - 75}px` }}
-    >
-      <p>
+  shouldComponentUpdate (nextProps, nextState) {
+    const { showTooltip } = this.state;
+    if (nextState.showTooltip === showTooltip) {
+      return false;
+    }
+    return true;
+  }
+
+  handleRenderTooltip (event) {
+    const { showTooltip } = this.state;
+    const xPosition = event.clientX;
+    const yPosition = event.clientY;
+    this.setState({ showTooltip: !showTooltip,
+      xPosition,
+      yPosition });
+  }
+
+  render () {
+    const { children, tooltipText, isTooltipActive } = this.props;
+    const { showTooltip, xPosition, yPosition } = this.state;
+
+    const xPositionOffset = 20;
+    const yPositionOffset = 75;
+    return (
+      <div
+        onMouseOut={this.handleRenderTooltip}
+        onMouseOver={this.handleRenderTooltip}
+      >
         {children}
-      </p>
-    </div>
-  );
-};
+
+        {showTooltip && isTooltipActive
+          ? (
+            <div
+              className="tooltip-wrapper"
+              style={{ 'left': `${xPosition - xPositionOffset}px`,
+                'top': `${yPosition - yPositionOffset}px` }}
+            >
+              <p>
+                {tooltipText}
+              </p>
+            </div>
+          ) : null}
+      </div>
+    );
+  }
+}
+
 Tooltip.propTypes = {
-  children: PropTypes.string.isRequired
+  children: PropTypes.string.isRequired,
+  isTooltipActive: PropTypes.bool.isRequired,
+  tooltipText: PropTypes.string.isRequired
 };
 export default Tooltip;