diff --git a/src/legacy/ui/public/vis/components/tooltip/_hierarchical_tooltip.html b/src/legacy/ui/public/vis/components/tooltip/_hierarchical_tooltip.html
index e57b07859540101..43c4793384bf136 100644
--- 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 @@
- {{row.field}} |
- {{row.bucket}} |
+
+ {{row.field}}
+ |
+
+ {{row.bucket}}
+ |
{{row.metric}} |
diff --git a/src/legacy/ui/public/vis/components/tooltip/_pointseries_tooltip.html b/src/legacy/ui/public/vis/components/tooltip/_pointseries_tooltip.html
index d6054594ec776f0..9e82739a57f0f2e 100644
--- 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 @@
- {{detail.label}} |
+
+ {{detail.label}}
+ |
- {{detail.value}}
- ({{detail.percent}})
+ {{detail.value}} ({{detail.percent}})
|
diff --git a/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss b/src/legacy/ui/public/vis/components/tooltip/_tooltip.scss
index 280c843247bd580..451ecc80844dde7 100644
--- 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
index 6008d5cf7961ab2..7c395a2f4dc0e42 100644
--- 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
+ });
+ }
};
/**