Fix tooltip text overflow (#41703) (#43207)

elastic · Aug 13, 2019 · fa4662f · fa4662f
1 parent 309d32a
commit fa4662f
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 5 deletions.
diff --git a/src/legacy/ui/public/vis/components/tooltip/_hierarchical_tooltip.html b/src/legacy/ui/public/vis/components/tooltip/_hierarchical_tooltip.html
@@ -16,8 +16,12 @@
   </thead>
   <tbody>
     <tr class="visTooltip__value" ng-repeat="row in rows track by $index">
-      <td><span ng-bind-html="row.spacer"></span>{{row.field}}</td>
-      <td>{{row.bucket}}</td>
+      <td>
+        <div class="visTooltip__labelContainer"><span ng-bind-html="row.spacer"></span>{{row.field}}</div>
+      </td>
+      <td>
+        <div class="visTooltip__labelContainer">{{row.bucket}}
+      </td>
       <td>{{row.metric}}</td>
     </tr>
   </tbody>

diff --git a/src/legacy/ui/public/vis/components/tooltip/_pointseries_tooltip.html b/src/legacy/ui/public/vis/components/tooltip/_pointseries_tooltip.html
@@ -1,10 +1,11 @@
 <table>
   <tbody>
     <tr ng-repeat="detail in details" >
-      <td class="visTooltip__label">{{detail.label}}</td>
+      <td class="visTooltip__label">
+        <div class="visTooltip__labelContainer">{{detail.label}}</div>
+      </td>
       <td class="visTooltip__value">
-          {{detail.value}}
-          <span ng-if="detail.percent"> ({{detail.percent}})</span>
+        <div class="visTooltip__valueContainer">{{detail.value}}<span ng-if="detail.percent"> ({{detail.percent}})</span></div>
       </td>
     </tr>
   </tbody>

diff --git a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss
@@ -22,7 +22,10 @@
   table {
     td,
     th {
+      text-align: left;
       padding: $euiSizeXS;
+      overflow-wrap: break-word;
+      word-wrap: break-word;
     }
   }
 }
@@ -41,6 +44,11 @@
     margin-top: $euiSizeS;
   }
 }
+.visTooltip__labelContainer,
+.visTooltip__valueContainer {
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+}
 
 .visTooltip__headerIcon {
   flex: 0 0 auto;

diff --git a/src/legacy/ui/public/vis/components/tooltip/tooltip.js b/src/legacy/ui/public/vis/components/tooltip/tooltip.js
@@ -22,9 +22,14 @@ import _ from 'lodash';
 import { Binder } from '../../../binder';
 import { positionTooltip } from './position_tooltip';
 import $ from 'jquery';
+import theme from '@elastic/eui/dist/eui_theme_light.json';
 
 let allContents = [];
 
+const tooltipColumnPadding = parseInt(theme.euiSizeXS || 0, 10) * 2;
+const tooltipTableMargin = parseInt(theme.euiSizeS || 0, 10) * 2;
+const tooltipMaxWidth = parseInt(theme.euiSizeXL || 0, 10) * 10;
+
 /**
  * Add tooltip and listeners to visualization elements
  *
@@ -97,6 +102,46 @@ Tooltip.prototype.show = function () {
     left: placement.left,
     top: placement.top
   });
+  // The number of columns on the tooltip is currently the only
+  // thing that differenciate one tooltip; from another
+  const tooltipColumns = $tooltip.find('tbody > tr:nth-of-type(1) > td').length;
+  if (tooltipColumns === 2) {
+    // on pointseries tooltip
+    const tooltipWidth = $tooltip.outerWidth();
+    // get the last column to the right
+    const valueColumn = $tooltip.find('tr:nth-of-type(1) > td:nth-child(2)');
+    if (valueColumn.length !== 1) {
+      return;
+    }
+    const valueColumnSize = valueColumn.outerWidth();
+    const isGratherThanHalf = valueColumnSize > tooltipWidth / 2;
+    const containerMaxWidth = isGratherThanHalf
+      ? tooltipWidth / 2 - tooltipTableMargin - tooltipColumnPadding * 2
+      : tooltipWidth - valueColumnSize - tooltipTableMargin - tooltipColumnPadding;
+
+    $tooltip.find('.visTooltip__labelContainer').css({
+      'max-width': containerMaxWidth,
+    });
+    if (isGratherThanHalf && tooltipWidth === tooltipMaxWidth) {
+      $tooltip.find('.visTooltip__valueContainer').css({
+        'max-width': containerMaxWidth,
+      });
+    }
+  } else if(tooltipColumns === 3) {
+    // on hierarchical tooltip
+    const tooltipWidth = $tooltip.outerWidth();
+    // get the last column to the right (3rd column)
+    const valueColumn = $tooltip.find('tr:nth-of-type(1) > td:nth-child(3)');
+    if (valueColumn.length !== 1) {
+      return;
+    }
+    const valueColumnSize = valueColumn.outerWidth();
+    const containerMaxWidth = (tooltipWidth - valueColumnSize - tooltipTableMargin) / 2 - tooltipColumnPadding;
+
+    $tooltip.find('.visTooltip__labelContainer').css({
+      'max-width': containerMaxWidth
+    });
+  }
 };
 
 /**