diff --git a/assets/css/app.css b/assets/css/app.css
index b23a08513102..675bdd2cdc5e 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -270,17 +270,6 @@ iframe[hidden] {
   @apply cursor-default bg-gray-100 dark:bg-gray-300 pointer-events-none;
 }
 
-#chartjs-tooltip {
-  background-color: rgba(25 30 56);
-  position: absolute;
-  font-size: 14px;
-  font-style: normal;
-  padding: 10px 12px;
-  pointer-events: none;
-  border-radius: 5px;
-  z-index: 100;
-}
-
 /* This class is used for styling embedded dashboards. Do not remove. */
 /* stylelint-disable */
 /* prettier-ignore */
diff --git a/assets/js/dashboard/stats/graph/graph-tooltip.js b/assets/js/dashboard/stats/graph/graph-tooltip.js
index 8a593a8e00fa..54633985fadf 100644
--- a/assets/js/dashboard/stats/graph/graph-tooltip.js
+++ b/assets/js/dashboard/stats/graph/graph-tooltip.js
@@ -102,9 +102,7 @@ let tooltipRoot
 export default function GraphTooltip(graphData, metric, query) {
   return (context) => {
     const tooltipModel = context.tooltip
-    const offset = document
-      .getElementById('main-graph-canvas')
-      .getBoundingClientRect()
+
     let tooltipEl = document.getElementById('chartjs-tooltip')
 
     if (!tooltipEl) {
@@ -116,14 +114,6 @@ export default function GraphTooltip(graphData, metric, query) {
       tooltipRoot = createRoot(tooltipEl)
     }
 
-    if (tooltipEl && offset && window.innerWidth < 768) {
-      tooltipEl.style.top =
-        offset.y + offset.height + window.scrollY + 15 + 'px'
-      tooltipEl.style.left = offset.x + 'px'
-      tooltipEl.style.right = null
-      tooltipEl.style.opacity = 1
-    }
-
     if (tooltipModel.opacity === 0) {
       tooltipEl.style.display = 'none'
       return
diff --git a/assets/js/dashboard/stats/graph/line-graph.js b/assets/js/dashboard/stats/graph/line-graph.js
index 2e2ce38a028c..05fd3e9884a8 100644
--- a/assets/js/dashboard/stats/graph/line-graph.js
+++ b/assets/js/dashboard/stats/graph/line-graph.js
@@ -26,6 +26,7 @@ class LineGraph extends React.Component {
   constructor(props) {
     super(props)
     this.regenerateChart = this.regenerateChart.bind(this)
+    this.repositionTooltip = this.repositionTooltip.bind(this)
     this.updateWindowDimensions = this.updateWindowDimensions.bind(this)
   }
 
@@ -158,25 +159,30 @@ class LineGraph extends React.Component {
 
   repositionTooltip(e) {
     const tooltipEl = document.getElementById('chartjs-tooltip')
-    if (tooltipEl && window.innerWidth >= 768) {
-      if (e.clientX > 0.66 * window.innerWidth) {
-        tooltipEl.style.right =
+    if (tooltipEl) {
+      if (this.chart?.canvas?.contains(e.target)) {
+        if (e.clientX > 0.5 * window.innerWidth) {
+          tooltipEl.style.right =
           window.innerWidth - e.clientX + window.pageXOffset + 'px'
-        tooltipEl.style.left = null
+          tooltipEl.style.left = null
+        } else {
+          tooltipEl.style.right = null
+          tooltipEl.style.left = e.clientX + window.pageXOffset + 'px'
+        }
+        tooltipEl.style.top = e.clientY + window.pageYOffset + 'px'
+        tooltipEl.style.opacity = 1
       } else {
-        tooltipEl.style.right = null
-        tooltipEl.style.left = e.clientX + window.pageXOffset + 'px'
+        tooltipEl.style.opacity = 0
+        tooltipEl.style.display = 'none'
       }
-      tooltipEl.style.top = e.clientY + window.pageYOffset + 'px'
-      tooltipEl.style.opacity = 1
     }
   }
 
   componentDidMount() {
     if (this.props.graphData) {
       this.chart = this.regenerateChart()
+      window.addEventListener('mousemove', this.repositionTooltip)
     }
-    window.addEventListener('mousemove', this.repositionTooltip)
   }
 
   componentDidUpdate(prevProps) {