Fix tooltip re-position after content resize & respect scroll bars

CHANGELOG.md

@@ -3,6 +3,10 @@
 - Added `getPopoverScreenCoordinates` service function for positioining popover/tooltip content, updated `EuiToolTip` to use it ([#924](https://github.com/elastic/eui/pull/924))
 - Allow `mode` prop in `EuiCodeEditor` to take custom mode object ([#935](https://github.com/elastic/eui/pull/935))
 
+**Bug fixes**
+
+- `EuiTooltip` re-positions content correctly after the window is resized ([#936](https://github.com/elastic/eui/pull/936))
+
 ## [`0.0.54`](https://github.com/elastic/eui/tree/v0.0.54)
 
 **Bug fixes**

src/components/tool_tip/tool_tip.js

@@ -37,6 +37,15 @@ export class EuiToolTip extends Component {
 
   setPopoverRef = ref => {
     this.popover = ref;
+
+    // if the popover has been unmounted, clear
+    // any previous knowledge about its size
+    if (ref == null) {
+      this.setState({
+        toolTipStyles: {},
+        arrowStyles: {}
+      });
+    }
   }
 
   showToolTip = () => {
@@ -52,7 +61,7 @@ export class EuiToolTip extends Component {
       position: requestedPosition,
       offset: 16, // offset popover 16px from the anchor
       arrowConfig: {
-        arrowWidth: 14,
+        arrowWidth: 12,
         arrowBuffer: 4
       }
     });

src/services/popover/popover_positioning.js

@@ -51,13 +51,17 @@ export function findPopoverPosition({ anchor, popover, position, buffer = 16, of
   const containerBoundingBox = getElementBoundingBox(container);
 
   // calculate the window's bounds
+  // window.(innerWidth|innerHeight) do not account for scrollbars
+  // so prefer the clientWidth/clientHeight of the DOM if available
+  const documentWidth = document.documentElement.clientWidth || window.innerWidth;
+  const documentHeight = document.documentElement.clientHeight || window.innerHeight;
   const windowBoundingBox = {
     top: 0,
-    right: window.innerWidth,
-    bottom: window.innerHeight,
+    right: documentWidth,
+    bottom: documentHeight,
     left: 0,
-    height: window.innerHeight,
-    width: window.innerWidth
+    height: documentHeight,
+    width: documentWidth
   };
 
   /**
@@ -236,6 +240,14 @@ export function getPopoverScreenCoordinates({
   // calculate the fit of the popover in this location
   // fit is in range 0.0 -> 1.0 and is the percentage of the popover which is visible in this location
   const combinedBoundingBox = intersectBoundingBoxes(windowBoundingBox, containerBoundingBox);
+
+  // shrink the visible bounding box by `buffer`
+  // to compute a fit value
+  combinedBoundingBox.top += buffer;
+  combinedBoundingBox.right -= buffer;
+  combinedBoundingBox.bottom -= buffer;
+  combinedBoundingBox.left += buffer;
+
   const fit = getVisibleFit(
     {
       top: popoverPlacement.top,

src/services/popover/popover_positioning.test.js

@@ -371,7 +371,7 @@ describe('popover_positioning', () => {
 
         // give the container limited space on both left and top, forcing to bottom-right
         const container = document.createElement('div');
-        container.getBoundingClientRect = () => makeBB(100, 300, 768, 30);
+        container.getBoundingClientRect = () => makeBB(50, 300, 768, 30);
 
         expect(findPopoverPosition({
           position: 'left',
@@ -382,7 +382,7 @@ describe('popover_positioning', () => {
         })).toEqual({
           fit: 1,
           position: 'right',
-          top: 100,
+          top: 85,
           left: 155
         });
       });