diff --git a/app/assets/javascripts/monitoring/components/graph.vue b/app/assets/javascripts/monitoring/components/graph.vue
index 322e083a0583e64221662f54413547c05ece7ece..33611c408efbbc38b61a92bdbce6c605104adfbc 100644
--- a/app/assets/javascripts/monitoring/components/graph.vue
+++ b/app/assets/javascripts/monitoring/components/graph.vue
@@ -250,6 +250,7 @@
             <graph-deployment
               :show-deploy-info="showDeployInfo"
               :deployment-data="reducedDeploymentData"
+              :graph-width="graphWidth"
               :graph-height="graphHeight"
               :graph-height-offset="graphHeightOffset"
             />
diff --git a/app/assets/javascripts/monitoring/components/graph/deployment.vue b/app/assets/javascripts/monitoring/components/graph/deployment.vue
index 3623d2ed946c02d57c619a1873bd9b82511bc006..e3b8be0c7fbd0fb33a869fdd1cdc4c7a4a8e7909 100644
--- a/app/assets/javascripts/monitoring/components/graph/deployment.vue
+++ b/app/assets/javascripts/monitoring/components/graph/deployment.vue
@@ -19,6 +19,10 @@
         type: Number,
         required: true,
       },
+      graphWidth: {
+        type: Number,
+        required: true,
+      },
     },
 
     computed: {
@@ -47,6 +51,14 @@
       transformDeploymentGroup(deployment) {
         return `translate(${Math.floor(deployment.xPos) + 1}, 20)`;
       },
+
+      positionFlag(deployment) {
+        let xPosition = 3;
+        if (deployment.xPos > (this.graphWidth - 200)) {
+          xPosition = -97;
+        }
+        return xPosition;
+      },
     },
   };
 </script>
@@ -77,7 +89,7 @@
       <svg
         v-if="deployment.showDeploymentFlag"
         class="js-deploy-info-box"
-        x="3"
+        :x="positionFlag(deployment)"
         y="0"
         width="92"
         height="60">
diff --git a/changelogs/unreleased/38031-monitoring-hover-info-is-clipped.yml b/changelogs/unreleased/38031-monitoring-hover-info-is-clipped.yml
new file mode 100644
index 0000000000000000000000000000000000000000..8b3fae2c1035bbca57e8507652ff0ba88f4df9cb
--- /dev/null
+++ b/changelogs/unreleased/38031-monitoring-hover-info-is-clipped.yml
@@ -0,0 +1,6 @@
+---
+title: Move the deployment flag content to the left when deployment marker is near
+  the end
+merge_request: 14514
+author:
+type: fixed
diff --git a/spec/javascripts/monitoring/graph/deployment_spec.js b/spec/javascripts/monitoring/graph/deployment_spec.js
index c2ff38ffab9dd4a87e4cc9cda1c0bc7fc6d3d2b6..dea42d755d4b18d941714cf48fdbfa1bf8f3b905 100644
--- a/spec/javascripts/monitoring/graph/deployment_spec.js
+++ b/spec/javascripts/monitoring/graph/deployment_spec.js
@@ -21,6 +21,7 @@ describe('MonitoringDeployment', () => {
       const component = createComponent({
         showDeployInfo: false,
         deploymentData: reducedDeploymentData,
+        graphWidth: 440,
         graphHeight: 300,
         graphHeightOffset: 120,
       });
@@ -36,6 +37,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: false,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -49,6 +51,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: false,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -62,6 +65,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: false,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -75,6 +79,7 @@ describe('MonitoringDeployment', () => {
       const component = createComponent({
         showDeployInfo: true,
         deploymentData: reducedDeploymentData,
+        graphWidth: 440,
         graphHeight: 300,
         graphHeightOffset: 120,
       });
@@ -82,12 +87,29 @@ describe('MonitoringDeployment', () => {
       expect(component.$el.querySelector('.js-deploy-info-box')).toBeNull();
     });
 
+    it('positions the flag to the left when the xPos is too far right', () => {
+      reducedDeploymentData[0].showDeploymentFlag = false;
+      reducedDeploymentData[0].xPos = 250;
+      const component = createComponent({
+        showDeployInfo: true,
+        deploymentData: reducedDeploymentData,
+        graphWidth: 440,
+        graphHeight: 300,
+        graphHeightOffset: 120,
+      });
+
+      expect(
+        component.positionFlag(reducedDeploymentData[0]),
+      ).toBeLessThan(0);
+    });
+
     it('shows the deployment flag', () => {
       reducedDeploymentData[0].showDeploymentFlag = true;
       const component = createComponent({
         showDeployInfo: true,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -102,6 +124,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: true,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -115,6 +138,7 @@ describe('MonitoringDeployment', () => {
         showDeployInfo: true,
         deploymentData: reducedDeploymentData,
         graphHeight: 300,
+        graphWidth: 440,
         graphHeightOffset: 120,
       });
 
@@ -127,6 +151,7 @@ describe('MonitoringDeployment', () => {
           showDeployInfo: true,
           deploymentData: reducedDeploymentData,
           graphHeight: 300,
+          graphWidth: 440,
           graphHeightOffset: 120,
         });