diff --git a/web/satellite/src/components/common/VChart.vue b/web/satellite/src/components/common/VChart.vue
index 591b88de0db1..514a342ab248 100644
--- a/web/satellite/src/components/common/VChart.vue
+++ b/web/satellite/src/components/common/VChart.vue
@@ -23,6 +23,8 @@ import {
     Plugin,
 } from 'chart.js';
 
+import { TooltipId } from '@/types/chart';
+
 ChartJS.register(LineElement, PointElement, VTooltip, Filler, LineController, CategoryScale, LinearScale);
 
 const props = defineProps<{
@@ -157,6 +159,18 @@ onMounted(() => {
 
 onUnmounted(() => {
     chart.value?.destroy();
+
+    // custom tooltip element doesn't get cleaned up if the user navigates to a new page using the keyboard.
+    // There is probably a better way to do this
+    const storageTooltip = document.getElementById(TooltipId.Storage);
+    if (storageTooltip) {
+        document.body.removeChild(storageTooltip);
+    }
+
+    const egressTooltip = document.getElementById(TooltipId.Bandwidth);
+    if (egressTooltip) {
+        document.body.removeChild(egressTooltip);
+    }
 });
 
 watch(() => props.chartData, () => {
diff --git a/web/satellite/src/components/project/dashboard/BandwidthChart.vue b/web/satellite/src/components/project/dashboard/BandwidthChart.vue
index 95c4298e857f..5fa88cdd16eb 100644
--- a/web/satellite/src/components/project/dashboard/BandwidthChart.vue
+++ b/web/satellite/src/components/project/dashboard/BandwidthChart.vue
@@ -16,7 +16,7 @@
 import { computed, ref, watch } from 'vue';
 import { ChartType, TooltipModel, ChartData } from 'chart.js';
 
-import { Tooltip, TooltipParams, ChartTooltipData } from '@/types/chart';
+import { Tooltip, TooltipParams, TooltipId, ChartTooltipData } from '@/types/chart';
 import { DataStamp } from '@/types/projects';
 import { ChartUtils } from '@/utils/chart';
 
@@ -69,7 +69,7 @@ const chartData = computed((): ChartData => {
  * Used as constructor of custom tooltip.
  */
 function tooltip(tooltipModel: TooltipModel<ChartType>): void {
-    const tooltipParams = new TooltipParams(tooltipModel, 'bandwidth-chart', 'allocated-bandwidth-tooltip',
+    const tooltipParams = new TooltipParams(tooltipModel, 'bandwidth-chart', TooltipId.Bandwidth,
         allocatedTooltipMarkUp(tooltipModel), 76, 81);
 
     Tooltip.custom(tooltipParams);
diff --git a/web/satellite/src/components/project/dashboard/StorageChart.vue b/web/satellite/src/components/project/dashboard/StorageChart.vue
index 3eb041fb0f74..1cc61fbd1b7d 100644
--- a/web/satellite/src/components/project/dashboard/StorageChart.vue
+++ b/web/satellite/src/components/project/dashboard/StorageChart.vue
@@ -16,7 +16,7 @@
 import { computed, ref, watch } from 'vue';
 import { ChartType, TooltipModel, ChartData } from 'chart.js';
 
-import { Tooltip, TooltipParams, ChartTooltipData } from '@/types/chart';
+import { Tooltip, TooltipParams, TooltipId, ChartTooltipData } from '@/types/chart';
 import { DataStamp } from '@/types/projects';
 import { ChartUtils } from '@/utils/chart';
 
@@ -68,7 +68,7 @@ const chartData = computed((): ChartData => {
  * Used as constructor of custom tooltip.
  */
 function tooltip(tooltipModel: TooltipModel<ChartType>): void {
-    const tooltipParams = new TooltipParams(tooltipModel, 'storage-chart', 'storage-tooltip',
+    const tooltipParams = new TooltipParams(tooltipModel, 'storage-chart', TooltipId.Storage,
         tooltipMarkUp(tooltipModel), 76, 81);
 
     Tooltip.custom(tooltipParams);
diff --git a/web/satellite/src/types/chart.ts b/web/satellite/src/types/chart.ts
index e7c63f124537..df58ce8d53b3 100644
--- a/web/satellite/src/types/chart.ts
+++ b/web/satellite/src/types/chart.ts
@@ -41,6 +41,14 @@ class Styling {
     ) {}
 }
 
+/**
+ * TooltipId defines tooltip IDs.
+ */
+export enum TooltipId {
+    Storage = 'storage-tooltip',
+    Bandwidth = 'allocated-bandwidth-tooltip',
+}
+
 /**
  * Tooltip provides custom tooltip rendering
  */