Merge pull request #193 from williaster/chris--tooltip-w-bounds-offset

[tooltip] add offset props to <TooltipWithBounds />
airbnb · Nov 9, 2017 · a590ef3 · a590ef3
2 parents 21e732c + 490d99d
commit a590ef3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/vx-bounds/src/enhancers/withBoundingRects.js b/packages/vx-bounds/src/enhancers/withBoundingRects.js
@@ -40,7 +40,7 @@ export default function withBoundingRects(BaseComponent) {
 
     componentDidMount() {
       this.node = ReactDOM.findDOMNode(this);
-      this.setState(this.getRects());
+      this.setState(() => this.getRects());
     }
 
     getRects() {

diff --git a/packages/vx-tooltip/src/tooltips/TooltipWithBounds.js b/packages/vx-tooltip/src/tooltips/TooltipWithBounds.js
@@ -8,13 +8,17 @@ import Tooltip from './Tooltip';
 const propTypes = {
   ...withBoundingRectsProps,
   ...Tooltip.propTypes,
+  offsetLeft: PropTypes.number,
+  offsetTop: PropTypes.number,
 };
 
 const defaultProps = {};
 
 function TooltipWithBounds({
   left: initialLeft,
   top: initialTop,
+  offsetLeft = 10,
+  offsetTop = 10,
   rect,
   parentRect,
   children,
@@ -24,8 +28,11 @@ function TooltipWithBounds({
   let top = initialTop;
 
   if (rect && parentRect) {
-    left = rect.right > parentRect.right ? (left - rect.width) : left;
-    top = rect.bottom > parentRect.bottom ? (top - rect.height) : top;
+    left = (offsetLeft + rect.right) > parentRect.right
+      ? (left - rect.width - offsetLeft) : left + offsetLeft;
+
+    top = (offsetTop + rect.bottom) > parentRect.bottom
+      ? (top - rect.height - offsetTop) : top + offsetTop;
   }
 
   return (