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

#100147) (#101083)

* 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 <42973632+kibanamachine@users.noreply.github.com>

Co-authored-by: Justin Kambic <justin.kambic@elastic.co>

x-pack/plugins/uptime/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>

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};