diff --git a/src/data-table/data-cell.jsx b/src/data-table/data-cell.jsx index e39c1ac..571a299 100644 --- a/src/data-table/data-cell.jsx +++ b/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 !== '.' ? - : null} + + {formattedMeasurementValue} + : null} ); } diff --git a/src/headers-table/column-header.jsx b/src/headers-table/column-header.jsx index d3bdbbb..da9120c 100644 --- a/src/headers-table/column-header.jsx +++ b/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 ? - : null} + + {entry.displayValue} + : null} ); } diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx index 53e004d..1d920e5 100644 --- a/src/tooltip/index.jsx +++ b/src/tooltip/index.jsx @@ -1,20 +1,22 @@ import React from 'react'; import PropTypes from 'prop-types'; -const Tooltip = ({ data, xPosition, yPosition }) => ( -
-

- {data} -

-
-); +const Tooltip = ({ children }) => { + const xPosition = event.clientX; + const yPosition = event.clientY; + return ( +
+

+ {children} +

+
+ ); +}; Tooltip.propTypes = { - data: PropTypes.string.isRequired, - xPosition: PropTypes.number, - yPosition: PropTypes.number + children: PropTypes.string.isRequired }; export default Tooltip;