diff --git a/x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss b/x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss index 25bf3597c3466..46e5d91e1cc83 100644 --- a/x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss +++ b/x-pack/plugins/ml/public/application/components/chart_tooltip/_chart_tooltip.scss @@ -25,15 +25,10 @@ } &__label { - overflow-wrap: break-word; - word-wrap: break-word; min-width: 1px; - flex: 1 1 auto; } &__value { - overflow-wrap: break-word; - word-wrap: break-word; font-weight: $euiFontWeightBold; text-align: right; font-feature-settings: 'tnum'; diff --git a/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx b/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx index 7897ef5cad0df..3bd4ae1748311 100644 --- a/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx +++ b/x-pack/plugins/ml/public/application/components/chart_tooltip/chart_tooltip.tsx @@ -7,6 +7,7 @@ import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react'; import classNames from 'classnames'; import TooltipTrigger from 'react-popper-tooltip'; +import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import { TooltipValueFormatter } from '@elastic/charts'; import './_index.scss'; @@ -79,8 +80,17 @@ const Tooltip: FC<{ service: ChartTooltipService }> = React.memo(({ service }) = borderLeftColor: color, }} > - {label} - {value} + + + {label} + + + {value} + + ); })}