feat(tooltip): improve positioning

plouc · Sep 19, 2017 · 288657c · 288657c
1 parent 1164883
commit 288657c
Showing 1 changed file with 22 additions and 13 deletions.
diff --git a/src/components/charts/Container.js b/src/components/charts/Container.js
@@ -18,14 +18,8 @@ const tooltipStyle = {
     pointerEvents: 'none',
     position: 'absolute',
     zIndex: 10,
-    top: 0,
-    left: 0,
 }
 
-const Tooltip = ({ x, y, children, theme }) => (
-    <div style={{ ...tooltipStyle, top: y, left: x, ...theme.tooltip }}>{children}</div>
-)
-
 const noopHandlers = {
     showTooltip: noop,
     hideTooltip: noop,
@@ -45,19 +39,28 @@ export default class Container extends Component {
     state = {
         isTooltipVisible: false,
         tooltipContent: null,
-        tooltipX: 0,
-        tooltipY: 0,
+        position: {},
     }
 
     showTooltip = (content, event) => {
         const { clientX, clientY } = event
         const bounds = this.container.getBoundingClientRect()
 
+        const x = clientX - bounds.left
+        const y = clientY - bounds.top
+
+        const position = {}
+
+        if (x < bounds.width / 2) position.left = x + 20
+        else position.right = bounds.width - x + 20
+
+        if (y < bounds.height / 2) position.top = y - 12
+        else position.bottom = bounds.height - y - 12
+
         this.setState({
             isTooltipVisible: true,
             tooltipContent: content,
-            tooltipX: clientX - bounds.left + 20,
-            tooltipY: clientY - bounds.top,
+            position,
         })
     }
 
@@ -67,7 +70,7 @@ export default class Container extends Component {
 
     render() {
         const { children, isInteractive, theme } = this.props
-        const { isTooltipVisible, tooltipContent, tooltipX, tooltipY } = this.state
+        const { isTooltipVisible, tooltipContent, position } = this.state
 
         if (!isInteractive) return children(noopHandlers)
 
@@ -83,9 +86,15 @@ export default class Container extends Component {
                     hideTooltip: this.hideTooltip,
                 })}
                 {isTooltipVisible && (
-                    <Tooltip x={tooltipX} y={tooltipY} theme={theme}>
+                    <div
+                        style={{
+                            ...tooltipStyle,
+                            ...position,
+                            ...theme.tooltip,
+                        }}
+                    >
                         {tooltipContent}
-                    </Tooltip>
+                    </div>
                 )}
             </div>
         )