handling tooltip logic within it

src/data-table/data-cell.jsx

@@ -65,9 +65,7 @@ class DataCell extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
-      showTooltip: false,
-      mouseXPosition: 0,
-      mouseYPosition: 0
+      showTooltip: false
     };
     this.handleEnter = this.handleEnter.bind(this);
     this.handleLeave = this.handleLeave.bind(this);
@@ -96,10 +94,8 @@ class DataCell extends React.Component {
     }
   }
 
-  handleEnter (event) {
-    this.setState({ showTooltip: true,
-      mouseXPosition: event.clientX,
-      mouseYPosition: event.clientY });
+  handleEnter () {
+    this.setState({ showTooltip: true });
   }
 
   handleLeave () {
@@ -107,7 +103,7 @@ class DataCell extends React.Component {
   }
 
   render () {
-    const { showTooltip, mouseXPosition, mouseYPosition } = this.state;
+    const { showTooltip } = this.state;
     const {
       data,
       general,
@@ -168,11 +164,9 @@ class DataCell extends React.Component {
         {formattedMeasurementValue}
         {showTooltip && !inEditState && formattedMeasurementValue !== '.'
           ?
-          <Tooltip
-            data={formattedMeasurementValue}
-            xPosition={mouseXPosition}
-            yPosition={mouseYPosition}
-          /> : null}
+          <Tooltip>
+            {formattedMeasurementValue}
+          </Tooltip> : null}
       </td>
     );
   }

src/headers-table/column-header.jsx

@@ -6,9 +6,7 @@ class ColumnHeader extends React.Component {
   constructor (props) {
     super(props);
     this.state = {
-      showTooltip: false,
-      mouseXPosition: 0,
-      mouseYPosition: 0
+      showTooltip: false
     };
     this.handleEnter = this.handleEnter.bind(this);
     this.handleLeave = this.handleLeave.bind(this);
@@ -28,10 +26,8 @@ class ColumnHeader extends React.Component {
     qlik.backendApi.selectValues(1, [entry.elementNumber], true);
   }
 
-  handleEnter (event) {
-    this.setState({ showTooltip: true,
-      mouseXPosition: event.clientX,
-      mouseYPosition: event.clientY });
+  handleEnter () {
+    this.setState({ showTooltip: true });
   }
 
   handleLeave () {
@@ -40,7 +36,7 @@ class ColumnHeader extends React.Component {
 
   render () {
     const { baseCSS, cellSuffix, colSpan, entry, styling, qlik } = this.props;
-    const { showTooltip, mouseXPosition, mouseYPosition } = this.state;
+    const { showTooltip } = this.state;
     const inEditState = qlik.inEditState();
 
     const style = {
@@ -62,11 +58,9 @@ class ColumnHeader extends React.Component {
         {entry.displayValue}
         {showTooltip && !inEditState
           ?
-          <Tooltip
-            data={entry.displayValue}
-            xPosition={mouseXPosition}
-            yPosition={mouseYPosition}
-          /> : null}
+          <Tooltip>
+            {entry.displayValue}
+          </Tooltip> : null}
       </th>
     );
   }

src/tooltip/index.jsx

@@ -1,20 +1,22 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-const Tooltip = ({ data, xPosition, yPosition }) => (
-  <div
-    className="tooltip-wrapper"
-    style={{ 'left': `${xPosition - 20}px`,
-      'top': `${yPosition - 75}px` }}
-  >
-    <p>
-      {data}
-    </p>
-  </div>
-);
+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>
+        {children}
+      </p>
+    </div>
+  );
+};
 Tooltip.propTypes = {
-  data: PropTypes.string.isRequired,
-  xPosition: PropTypes.number,
-  yPosition: PropTypes.number
+  children: PropTypes.string.isRequired
 };
 export default Tooltip;