diff --git a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/middle_truncated_text.tsx b/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/middle_truncated_text.tsx
index cb7159485856c..a661d60400f97 100644
--- a/x-pack/plugins/uptime/public/components/monitor/synthetics/waterfall/components/middle_truncated_text.tsx
+++ b/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>
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
index 9a884c6824284..8e3033037766a 100644
--- 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};