diff --git a/.eslintrc.js b/.eslintrc.js index ec3a53b..1af18c4 100644 --- a/.eslintrc.js +++ b/.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], diff --git a/src/main.less b/src/main.less index ec82ceb..1cfca0f 100644 --- a/src/main.less +++ b/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; } diff --git a/src/tooltip/index.jsx b/src/tooltip/index.jsx index a131a31..c156c80 100644 --- a/src/tooltip/index.jsx +++ b/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 (