[Maps] reposition tooltip when tooltip size changes (#43152)

* [Maps] reposition tooltip when tooltip size changes * review feedback * fix jest tests * add check to ensure tooltip state location is still provided
elastic · Aug 13, 2019 · b527c00 · b527c00
1 parent 4e59b06
commit b527c00
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/feature_properties.js b/x-pack/legacy/plugins/maps/public/connected_components/map/feature_properties.js
@@ -30,6 +30,7 @@ export class FeatureProperties extends React.Component {
 
   componentDidUpdate() {
     this._loadProperties();
+    this.props.reevaluateTooltipPosition();
   }
 
   componentWillUnmount() {
@@ -109,7 +110,6 @@ export class FeatureProperties extends React.Component {
   }
 
   render() {
-
     if (this.state.loadPropertiesErrorMsg) {
       return (
         <EuiCallOut

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/feature_properties.test.js b/x-pack/legacy/plugins/maps/public/connected_components/map/feature_properties.test.js
@@ -33,7 +33,8 @@ const defaultProps = {
   featureId: `feature`,
   layerId: `layer`,
   onCloseTooltip: () => {},
-  showFilterButtons: false
+  showFilterButtons: false,
+  reevaluateTooltipPosition: () => {},
 };
 
 const mockTooltipProperties = [

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/feature_tooltip.js b/x-pack/legacy/plugins/maps/public/connected_components/map/feature_tooltip.js
@@ -125,6 +125,7 @@ export class FeatureTooltip extends React.Component {
         showFilterButtons={this.props.showFilterButtons}
         onCloseTooltip={this._onCloseTooltip}
         addFilters={this.props.addFilters}
+        reevaluateTooltipPosition={this.props.reevaluateTooltipPosition}
       />
     );
   }

diff --git a/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js b/x-pack/legacy/plugins/maps/public/connected_components/map/mb/view.js
@@ -454,6 +454,15 @@ export class MBMapContainer extends React.Component {
     addSpritesheetToMap(json, sprites, this._mbMap);
   }
 
+  _reevaluateTooltipPosition = () => {
+    // Force mapbox to ensure tooltip does not clip map boundary and move anchor when clipping occurs
+    requestAnimationFrame(() => {
+      if (this._isMounted && this.props.tooltipState && this.props.tooltipState.location) {
+        this._mbPopup.setLngLat(this.props.tooltipState.location);
+      }
+    });
+  }
+
   _hideTooltip() {
     if (this._mbPopup.isOpen()) {
       this._mbPopup.remove();
@@ -475,6 +484,7 @@ export class MBMapContainer extends React.Component {
         showFilterButtons={!!this.props.addFilters && isLocked}
         isLocked={isLocked}
         addFilters={this.props.addFilters}
+        reevaluateTooltipPosition={this._reevaluateTooltipPosition}
       />
     ), this._tooltipContainer);