Wrap long text inside of TSVB chart tooltip. (elastic#39630)

XavierM · Jun 26, 2019 · 32b6778 · 32b6778
1 parent 6c431e2
commit 32b6778
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/legacy/core_plugins/metrics/public/visualizations/components/_timeseries_chart.scss b/src/legacy/core_plugins/metrics/public/visualizations/components/_timeseries_chart.scss
@@ -98,10 +98,27 @@
   display: flex;
 }
 
+/**
+ * 1. Ensure tvbTooltip__label text wraps nicely.
+ * 2. Create consistent space between the dot icon and the label.
+ */
+.tvbTooltip__labelContainer {
+  display: flex;
+  flex-wrap: wrap;
+  flex-grow: 1;
+  min-width: 1px; /* 1 */
+  margin-left: $euiSizeXS; /* 2 */
+}
+
+/**
+ * 1. Ensure text wraps nicely.
+ */
 .tvbTooltip__label {
   flex-grow: 1;
-  margin-left: $euiSizeXS;
   margin-right: $euiSizeXS;
+  word-wrap: break-word; /* 1 */
+  overflow-wrap: break-word; /* 1 */
+  min-width: 1px; /* 1 */
 }
 
 .tvbTooltip__icon,

diff --git a/src/legacy/core_plugins/metrics/public/visualizations/components/timeseries_chart.js b/src/legacy/core_plugins/metrics/public/visualizations/components/timeseries_chart.js
@@ -162,8 +162,10 @@ export class TimeseriesChart extends Component {
             </div>
             <div className="tvbTooltip__item">
               <EuiIcon className="tvbTooltip__icon" type="dot" color={item.series.color} />
-              <div className="tvbTooltip__label">{item.series.label}</div>
-              <div className="tvbTooltip__value">{formatter(value)}</div>
+              <div className="tvbTooltip__labelContainer">
+                <div className="tvbTooltip__label">{item.series.label}</div>
+                <div className="tvbTooltip__value">{formatter(value)}</div>
+              </div>
             </div>
           </div>
         </div>