[Uptime] New width/delay definition for waterfall sidebar item tooltip (

elastic#100147) * Add new width definition for waterfall sidebar item. Add delay to tooltip. * Add default value for style if/when undefined. * Create shared style for eui breakpoints to use by both waterfall tooltip types. * Add a comment. * Use viewport units instead of breakpoints. * Rename a style. * Add top margin to prevent tooltip from missing target item. Rename a style. * Adjust custom `margin-top`. * Add index to tooltip content. Co-authored-by: Kibana Machine <[email protected]>
justinkambic · Jun 1, 2021 · f58ddc4 · f58ddc4
1 parent 0f9debe
commit f58ddc4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/...ptime/public/components/monitor/synthetics/waterfall/components/middle_truncated_text.tsx b/...ptime/public/components/monitor/synthetics/waterfall/components/middle_truncated_text.tsx
@@ -16,6 +16,7 @@ import {
   EuiIcon,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { WaterfallTooltipResponsiveMaxWidth } from './styles';
 import { FIXED_AXIS_HEIGHT } from './constants';
 import { euiStyled } from '../../../../../../../../../src/plugins/kibana_react/common';
 
@@ -113,7 +114,13 @@ export const MiddleTruncatedText = ({
       <EuiScreenReaderOnly>
         <span data-test-subj="middleTruncatedTextSROnly">{fullText}</span>
       </EuiScreenReaderOnly>
-      <EuiToolTip content={fullText} position="top" data-test-subj="middleTruncatedTextToolTip">
+      <WaterfallTooltipResponsiveMaxWidth
+        as={EuiToolTip}
+        content={`${index}. ${fullText}`}
+        data-test-subj="middleTruncatedTextToolTip"
+        delay="long"
+        position="top"
+      >
         <>
           {onClick ? (
             <StyledButton
@@ -153,7 +160,7 @@ export const MiddleTruncatedText = ({
             </InnerContainer>
           )}
         </>
-      </EuiToolTip>
+      </WaterfallTooltipResponsiveMaxWidth>
       <span>
         <EuiLink href={url} external target="_blank">
           <EuiScreenReaderOnly>

diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/styles.ts b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/styles.ts
@@ -143,7 +143,12 @@ export const WaterfallChartLegendContainer = euiStyled.div`
   box-shadow: 0px -1px 4px 0px ${(props) => props.theme.eui.euiColorLightShade};
 `; // NOTE: EuiShadowColor is a little too dark to work with the background-color
 
-export const WaterfallChartTooltip = euiStyled.div`
+export const WaterfallTooltipResponsiveMaxWidth = euiStyled.div`
+  margin-top: 16px;
+  max-width: 90vw;
+`;
+
+export const WaterfallChartTooltip = euiStyled(WaterfallTooltipResponsiveMaxWidth)`
   background-color: ${(props) => props.theme.eui.euiColorDarkestShade};
   border-radius: ${(props) => props.theme.eui.euiBorderRadius};
   color: ${(props) => props.theme.eui.euiColorLightestShade};