From 57e87aaf49aa2882dfcbc5de35a9adc42b79d30c Mon Sep 17 00:00:00 2001
From: Jayanthi <jayanthi.sourirajan@particular.net>
Date: Tue, 2 Sep 2025 15:01:17 -0700
Subject: [PATCH 1/4] add tool tips to menu items

---
 src/Frontend/src/components/audit/AuditMenuItem.vue             | 2 +-
 .../src/components/configuration/ConfigurationMenuItem.vue      | 2 +-
 .../src/components/customchecks/CustomChecksMenuItem.vue        | 2 +-
 src/Frontend/src/components/dashboard/DashboardMenuItem.vue     | 2 +-
 src/Frontend/src/components/events/EventsMenuItem.vue           | 2 +-
 .../src/components/failedmessages/FailedMessagesMenuItem.vue    | 2 +-
 src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue   | 2 +-
 src/Frontend/src/components/monitoring/MonitoringMenuItem.vue   | 2 +-
 src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue  | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditMenuItem.vue b/src/Frontend/src/components/audit/AuditMenuItem.vue
index ff80a9061..12f87e9b8 100644
--- a/src/Frontend/src/components/audit/AuditMenuItem.vue
+++ b/src/Frontend/src/components/audit/AuditMenuItem.vue
@@ -6,7 +6,7 @@ import { faEnvelopeOpen } from "@fortawesome/free-solid-svg-icons";
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.messages.root">
+  <RouterLink :to="routeLinks.messages.root" title="All Messages">
     <FAIcon :icon="faEnvelopeOpen" title="All Messages" />
     <span class="navbar-label">All Messages</span>
   </RouterLink>
diff --git a/src/Frontend/src/components/configuration/ConfigurationMenuItem.vue b/src/Frontend/src/components/configuration/ConfigurationMenuItem.vue
index e5d4716cd..1d26dc7b2 100644
--- a/src/Frontend/src/components/configuration/ConfigurationMenuItem.vue
+++ b/src/Frontend/src/components/configuration/ConfigurationMenuItem.vue
@@ -23,7 +23,7 @@ const displayDanger = computed(() => {
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.configuration.root" exact>
+  <RouterLink :to="routeLinks.configuration.root" exact title="Configuration">
     <FAIcon :icon="faGear" title="Configuration" />
     <span class="navbar-label">Configuration</span>
     <exclamation-mark :type="WarningLevel.Danger" v-if="displayDanger" />
diff --git a/src/Frontend/src/components/customchecks/CustomChecksMenuItem.vue b/src/Frontend/src/components/customchecks/CustomChecksMenuItem.vue
index 5b932409a..75424da48 100644
--- a/src/Frontend/src/components/customchecks/CustomChecksMenuItem.vue
+++ b/src/Frontend/src/components/customchecks/CustomChecksMenuItem.vue
@@ -11,7 +11,7 @@ const { failingCount } = storeToRefs(store);
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.customChecks">
+  <RouterLink :to="routeLinks.customChecks" title="Custom Checks">
     <FAIcon :icon="faCheck" title="Custom Checks" />
     <span class="navbar-label">Custom Checks</span>
     <span v-if="failingCount > 0" class="badge badge-important">{{ failingCount }}</span>
diff --git a/src/Frontend/src/components/dashboard/DashboardMenuItem.vue b/src/Frontend/src/components/dashboard/DashboardMenuItem.vue
index 28d1efdfa..3a5c913f0 100644
--- a/src/Frontend/src/components/dashboard/DashboardMenuItem.vue
+++ b/src/Frontend/src/components/dashboard/DashboardMenuItem.vue
@@ -6,7 +6,7 @@ import FAIcon from "@/components/FAIcon.vue";
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.dashboard">
+  <RouterLink :to="routeLinks.dashboard" title="Dashboard">
     <FAIcon :icon="faGauge" title="Dashboard" />
     <span class="navbar-label">Dashboard</span>
   </RouterLink>
diff --git a/src/Frontend/src/components/events/EventsMenuItem.vue b/src/Frontend/src/components/events/EventsMenuItem.vue
index a1dd1a6da..c92e745d0 100644
--- a/src/Frontend/src/components/events/EventsMenuItem.vue
+++ b/src/Frontend/src/components/events/EventsMenuItem.vue
@@ -6,7 +6,7 @@ import { faListUl } from "@fortawesome/free-solid-svg-icons";
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.events">
+  <RouterLink :to="routeLinks.events" title="Events">
     <FAIcon :icon="faListUl" title="Events" />
     <span class="navbar-label">Events</span>
   </RouterLink>
diff --git a/src/Frontend/src/components/failedmessages/FailedMessagesMenuItem.vue b/src/Frontend/src/components/failedmessages/FailedMessagesMenuItem.vue
index 3fe99b63e..c5bfd1e16 100644
--- a/src/Frontend/src/components/failedmessages/FailedMessagesMenuItem.vue
+++ b/src/Frontend/src/components/failedmessages/FailedMessagesMenuItem.vue
@@ -7,7 +7,7 @@ import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.failedMessage.root">
+  <RouterLink :to="routeLinks.failedMessage.root" title="Failed Messages">
     <FAIcon :icon="faEnvelope" title="Failed Messages" />
     <span class="navbar-label">Failed Messages</span>
     <span v-if="stats.number_of_failed_messages > 0" class="badge badge-important">{{ stats.number_of_failed_messages }}</span>
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue b/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
index 73a41a572..744b47772 100644
--- a/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
+++ b/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
@@ -10,7 +10,7 @@ const { failedHeartbeatsCount } = storeToRefs(useHeartbeatsStore());
 </script>
 
 <template>
-  <RouterLink aria-label="Heartbeats Menu Item" :to="routeLinks.heartbeats.root">
+  <RouterLink aria-label="Heartbeats Menu Item" :to="routeLinks.heartbeats.root" title="Heartbeats">
     <FAIcon :icon="faHeartPulse" title="Heartbeats" />
     <span class="navbar-label">Heartbeats</span>
     <span v-if="failedHeartbeatsCount > 0" class="badge badge-important" aria-label="Alert Count">{{ failedHeartbeatsCount }}</span>
diff --git a/src/Frontend/src/components/monitoring/MonitoringMenuItem.vue b/src/Frontend/src/components/monitoring/MonitoringMenuItem.vue
index 848fdbe6b..d18e8f74d 100644
--- a/src/Frontend/src/components/monitoring/MonitoringMenuItem.vue
+++ b/src/Frontend/src/components/monitoring/MonitoringMenuItem.vue
@@ -7,7 +7,7 @@ import { faChartLine } from "@fortawesome/free-solid-svg-icons";
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.monitoring.root">
+  <RouterLink :to="routeLinks.monitoring.root" title="Monitoring">
     <FAIcon :icon="faChartLine" title="Monitoring" />
     <span class="navbar-label">Monitoring</span>
     <span v-if="stats.number_of_disconnected_endpoints > 0" class="badge badge-important">{{ stats.number_of_disconnected_endpoints }}</span>
diff --git a/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue b/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
index bcdd9a0e5..dd66374ed 100644
--- a/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
+++ b/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
@@ -6,7 +6,7 @@ import { faFileLines } from "@fortawesome/free-solid-svg-icons";
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.throughput.root">
+  <RouterLink :to="routeLinks.throughput.root" title="Usage">
     <FAIcon :icon="faFileLines" title="Usage" />
     <span class="navbar-label">Usage</span>
   </RouterLink>

From cd410754f2c0bb9012e20b716bc2645cd241842f Mon Sep 17 00:00:00 2001
From: Jayanthi <jayanthi.sourirajan@particular.net>
Date: Thu, 4 Sep 2025 05:54:39 -0700
Subject: [PATCH 2/4] switch to using tippy for tool tips

---
 src/Frontend/src/components/audit/AuditMenuItem.vue           | 4 ++--
 .../src/components/configuration/ConfigurationMenuItem.vue    | 4 ++--
 .../src/components/customchecks/CustomChecksMenuItem.vue      | 4 ++--
 src/Frontend/src/components/dashboard/DashboardMenuItem.vue   | 4 ++--
 src/Frontend/src/components/events/EventsMenuItem.vue         | 4 ++--
 .../src/components/failedmessages/FailedMessagesMenuItem.vue  | 4 ++--
 src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue | 4 ++--
 src/Frontend/src/components/monitoring/MonitoringMenuItem.vue | 4 ++--
 8 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditMenuItem.vue b/src/Frontend/src/components/audit/AuditMenuItem.vue
index 12f87e9b8..6d5466d98 100644
--- a/src/Frontend/src/components/audit/AuditMenuItem.vue
+++ b/src/Frontend/src/components/audit/AuditMenuItem.vue
@@ -6,8 +6,8 @@ import { faEnvelopeOpen } from "@fortawesome/free-solid-svg-icons";
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.messages.root" title="All Messages">
-    <FAIcon :icon="faEnvelopeOpen" title="All Messages" />
+  <RouterLink :to="routeLinks.messages.root">
+    <FAIcon :icon="faEnvelopeOpen" v-tippy="`All Messages`" />
     <span class="navbar-label">All Messages</span>
   </RouterLink>
 </template>
diff --git a/src/Frontend/src/components/configuration/ConfigurationMenuItem.vue b/src/Frontend/src/components/configuration/ConfigurationMenuItem.vue
index 1d26dc7b2..d14ef6708 100644
--- a/src/Frontend/src/components/configuration/ConfigurationMenuItem.vue
+++ b/src/Frontend/src/components/configuration/ConfigurationMenuItem.vue
@@ -23,8 +23,8 @@ const displayDanger = computed(() => {
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.configuration.root" exact title="Configuration">
-    <FAIcon :icon="faGear" title="Configuration" />
+  <RouterLink :to="routeLinks.configuration.root" exact>
+    <FAIcon :icon="faGear" v-tippy="`Configuration`" />
     <span class="navbar-label">Configuration</span>
     <exclamation-mark :type="WarningLevel.Danger" v-if="displayDanger" />
     <exclamation-mark :type="WarningLevel.Warning" v-else-if="displayWarn" />
diff --git a/src/Frontend/src/components/customchecks/CustomChecksMenuItem.vue b/src/Frontend/src/components/customchecks/CustomChecksMenuItem.vue
index 75424da48..818ab9f6e 100644
--- a/src/Frontend/src/components/customchecks/CustomChecksMenuItem.vue
+++ b/src/Frontend/src/components/customchecks/CustomChecksMenuItem.vue
@@ -11,8 +11,8 @@ const { failingCount } = storeToRefs(store);
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.customChecks" title="Custom Checks">
-    <FAIcon :icon="faCheck" title="Custom Checks" />
+  <RouterLink :to="routeLinks.customChecks">
+    <FAIcon :icon="faCheck" v-tippy="`Custom Checks`" />
     <span class="navbar-label">Custom Checks</span>
     <span v-if="failingCount > 0" class="badge badge-important">{{ failingCount }}</span>
   </RouterLink>
diff --git a/src/Frontend/src/components/dashboard/DashboardMenuItem.vue b/src/Frontend/src/components/dashboard/DashboardMenuItem.vue
index 3a5c913f0..ccdf4f9ef 100644
--- a/src/Frontend/src/components/dashboard/DashboardMenuItem.vue
+++ b/src/Frontend/src/components/dashboard/DashboardMenuItem.vue
@@ -6,8 +6,8 @@ import FAIcon from "@/components/FAIcon.vue";
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.dashboard" title="Dashboard">
-    <FAIcon :icon="faGauge" title="Dashboard" />
+  <RouterLink :to="routeLinks.dashboard">
+    <FAIcon :icon="faGauge" v-tippy="`Dashboard`" />
     <span class="navbar-label">Dashboard</span>
   </RouterLink>
 </template>
diff --git a/src/Frontend/src/components/events/EventsMenuItem.vue b/src/Frontend/src/components/events/EventsMenuItem.vue
index c92e745d0..eb0823199 100644
--- a/src/Frontend/src/components/events/EventsMenuItem.vue
+++ b/src/Frontend/src/components/events/EventsMenuItem.vue
@@ -6,8 +6,8 @@ import { faListUl } from "@fortawesome/free-solid-svg-icons";
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.events" title="Events">
-    <FAIcon :icon="faListUl" title="Events" />
+  <RouterLink :to="routeLinks.events">
+    <FAIcon :icon="faListUl" v-tippy="`Events`" />
     <span class="navbar-label">Events</span>
   </RouterLink>
 </template>
diff --git a/src/Frontend/src/components/failedmessages/FailedMessagesMenuItem.vue b/src/Frontend/src/components/failedmessages/FailedMessagesMenuItem.vue
index c5bfd1e16..eafe3c6c5 100644
--- a/src/Frontend/src/components/failedmessages/FailedMessagesMenuItem.vue
+++ b/src/Frontend/src/components/failedmessages/FailedMessagesMenuItem.vue
@@ -7,8 +7,8 @@ import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.failedMessage.root" title="Failed Messages">
-    <FAIcon :icon="faEnvelope" title="Failed Messages" />
+  <RouterLink :to="routeLinks.failedMessage.root">
+    <FAIcon :icon="faEnvelope" v-tippy="`Failed Messages`" />
     <span class="navbar-label">Failed Messages</span>
     <span v-if="stats.number_of_failed_messages > 0" class="badge badge-important">{{ stats.number_of_failed_messages }}</span>
   </RouterLink>
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue b/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
index 744b47772..bdfb676ba 100644
--- a/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
+++ b/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
@@ -10,8 +10,8 @@ const { failedHeartbeatsCount } = storeToRefs(useHeartbeatsStore());
 </script>
 
 <template>
-  <RouterLink aria-label="Heartbeats Menu Item" :to="routeLinks.heartbeats.root" title="Heartbeats">
-    <FAIcon :icon="faHeartPulse" title="Heartbeats" />
+  <RouterLink aria-label="Heartbeats Menu Item" :to="routeLinks.heartbeats.root">
+    <FAIcon :icon="faHeartPulse" v-tippy="`Heartbeats`" />
     <span class="navbar-label">Heartbeats</span>
     <span v-if="failedHeartbeatsCount > 0" class="badge badge-important" aria-label="Alert Count">{{ failedHeartbeatsCount }}</span>
   </RouterLink>
diff --git a/src/Frontend/src/components/monitoring/MonitoringMenuItem.vue b/src/Frontend/src/components/monitoring/MonitoringMenuItem.vue
index d18e8f74d..f74ab14f6 100644
--- a/src/Frontend/src/components/monitoring/MonitoringMenuItem.vue
+++ b/src/Frontend/src/components/monitoring/MonitoringMenuItem.vue
@@ -7,8 +7,8 @@ import { faChartLine } from "@fortawesome/free-solid-svg-icons";
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.monitoring.root" title="Monitoring">
-    <FAIcon :icon="faChartLine" title="Monitoring" />
+  <RouterLink :to="routeLinks.monitoring.root">
+    <FAIcon :icon="faChartLine" v-tippy="`Monitoring`" />
     <span class="navbar-label">Monitoring</span>
     <span v-if="stats.number_of_disconnected_endpoints > 0" class="badge badge-important">{{ stats.number_of_disconnected_endpoints }}</span>
   </RouterLink>

From 6b054d1d57d303cf0b4712ac058f10a9e2153124 Mon Sep 17 00:00:00 2001
From: Jayanthi <jayanthi.sourirajan@particular.net>
Date: Thu, 4 Sep 2025 05:56:41 -0700
Subject: [PATCH 3/4] change to using tippy

---
 .../src/views/throughputreport/ThroughputMenuItem.vue         | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue b/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
index dd66374ed..6f1f16aa2 100644
--- a/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
+++ b/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
@@ -6,8 +6,8 @@ import { faFileLines } from "@fortawesome/free-solid-svg-icons";
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.throughput.root" title="Usage">
-    <FAIcon :icon="faFileLines" title="Usage" />
+  <RouterLink :to="routeLinks.throughput.root">
+    <FAIcon :icon="faFileLines" v-tippy="`Usage`" />
     <span class="navbar-label">Usage</span>
   </RouterLink>
 </template>

From 7a690b207b57d2e42d459353984c0310035bac32 Mon Sep 17 00:00:00 2001
From: Jayanthi <jayanthi.sourirajan@particular.net>
Date: Thu, 4 Sep 2025 06:11:14 -0700
Subject: [PATCH 4/4] fix the typo ticks

---
 src/Frontend/src/components/audit/AuditMenuItem.vue             | 2 +-
 .../src/components/configuration/ConfigurationMenuItem.vue      | 2 +-
 .../src/components/customchecks/CustomChecksMenuItem.vue        | 2 +-
 src/Frontend/src/components/dashboard/DashboardMenuItem.vue     | 2 +-
 src/Frontend/src/components/events/EventsMenuItem.vue           | 2 +-
 .../src/components/failedmessages/FailedMessagesMenuItem.vue    | 2 +-
 src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue   | 2 +-
 src/Frontend/src/components/monitoring/MonitoringMenuItem.vue   | 2 +-
 src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue  | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/Frontend/src/components/audit/AuditMenuItem.vue b/src/Frontend/src/components/audit/AuditMenuItem.vue
index 6d5466d98..91abe0b0c 100644
--- a/src/Frontend/src/components/audit/AuditMenuItem.vue
+++ b/src/Frontend/src/components/audit/AuditMenuItem.vue
@@ -7,7 +7,7 @@ import { faEnvelopeOpen } from "@fortawesome/free-solid-svg-icons";
 
 <template>
   <RouterLink :to="routeLinks.messages.root">
-    <FAIcon :icon="faEnvelopeOpen" v-tippy="`All Messages`" />
+    <FAIcon :icon="faEnvelopeOpen" v-tippy="'All Messages'" />
     <span class="navbar-label">All Messages</span>
   </RouterLink>
 </template>
diff --git a/src/Frontend/src/components/configuration/ConfigurationMenuItem.vue b/src/Frontend/src/components/configuration/ConfigurationMenuItem.vue
index d14ef6708..1747bd258 100644
--- a/src/Frontend/src/components/configuration/ConfigurationMenuItem.vue
+++ b/src/Frontend/src/components/configuration/ConfigurationMenuItem.vue
@@ -24,7 +24,7 @@ const displayDanger = computed(() => {
 
 <template>
   <RouterLink :to="routeLinks.configuration.root" exact>
-    <FAIcon :icon="faGear" v-tippy="`Configuration`" />
+    <FAIcon :icon="faGear" v-tippy="'Configuration'" />
     <span class="navbar-label">Configuration</span>
     <exclamation-mark :type="WarningLevel.Danger" v-if="displayDanger" />
     <exclamation-mark :type="WarningLevel.Warning" v-else-if="displayWarn" />
diff --git a/src/Frontend/src/components/customchecks/CustomChecksMenuItem.vue b/src/Frontend/src/components/customchecks/CustomChecksMenuItem.vue
index 818ab9f6e..3e1ef2e08 100644
--- a/src/Frontend/src/components/customchecks/CustomChecksMenuItem.vue
+++ b/src/Frontend/src/components/customchecks/CustomChecksMenuItem.vue
@@ -12,7 +12,7 @@ const { failingCount } = storeToRefs(store);
 
 <template>
   <RouterLink :to="routeLinks.customChecks">
-    <FAIcon :icon="faCheck" v-tippy="`Custom Checks`" />
+    <FAIcon :icon="faCheck" v-tippy="'Custom Checks'" />
     <span class="navbar-label">Custom Checks</span>
     <span v-if="failingCount > 0" class="badge badge-important">{{ failingCount }}</span>
   </RouterLink>
diff --git a/src/Frontend/src/components/dashboard/DashboardMenuItem.vue b/src/Frontend/src/components/dashboard/DashboardMenuItem.vue
index ccdf4f9ef..f103be6e6 100644
--- a/src/Frontend/src/components/dashboard/DashboardMenuItem.vue
+++ b/src/Frontend/src/components/dashboard/DashboardMenuItem.vue
@@ -7,7 +7,7 @@ import FAIcon from "@/components/FAIcon.vue";
 
 <template>
   <RouterLink :to="routeLinks.dashboard">
-    <FAIcon :icon="faGauge" v-tippy="`Dashboard`" />
+    <FAIcon :icon="faGauge" v-tippy="'Dashboard'" />
     <span class="navbar-label">Dashboard</span>
   </RouterLink>
 </template>
diff --git a/src/Frontend/src/components/events/EventsMenuItem.vue b/src/Frontend/src/components/events/EventsMenuItem.vue
index eb0823199..c90f56127 100644
--- a/src/Frontend/src/components/events/EventsMenuItem.vue
+++ b/src/Frontend/src/components/events/EventsMenuItem.vue
@@ -7,7 +7,7 @@ import { faListUl } from "@fortawesome/free-solid-svg-icons";
 
 <template>
   <RouterLink :to="routeLinks.events">
-    <FAIcon :icon="faListUl" v-tippy="`Events`" />
+    <FAIcon :icon="faListUl" v-tippy="'Events'" />
     <span class="navbar-label">Events</span>
   </RouterLink>
 </template>
diff --git a/src/Frontend/src/components/failedmessages/FailedMessagesMenuItem.vue b/src/Frontend/src/components/failedmessages/FailedMessagesMenuItem.vue
index eafe3c6c5..c80e2fd6e 100644
--- a/src/Frontend/src/components/failedmessages/FailedMessagesMenuItem.vue
+++ b/src/Frontend/src/components/failedmessages/FailedMessagesMenuItem.vue
@@ -8,7 +8,7 @@ import { faEnvelope } from "@fortawesome/free-solid-svg-icons";
 
 <template>
   <RouterLink :to="routeLinks.failedMessage.root">
-    <FAIcon :icon="faEnvelope" v-tippy="`Failed Messages`" />
+    <FAIcon :icon="faEnvelope" v-tippy="'Failed Messages'" />
     <span class="navbar-label">Failed Messages</span>
     <span v-if="stats.number_of_failed_messages > 0" class="badge badge-important">{{ stats.number_of_failed_messages }}</span>
   </RouterLink>
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue b/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
index bdfb676ba..d34808a79 100644
--- a/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
+++ b/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
@@ -11,7 +11,7 @@ const { failedHeartbeatsCount } = storeToRefs(useHeartbeatsStore());
 
 <template>
   <RouterLink aria-label="Heartbeats Menu Item" :to="routeLinks.heartbeats.root">
-    <FAIcon :icon="faHeartPulse" v-tippy="`Heartbeats`" />
+    <FAIcon :icon="faHeartPulse" v-tippy="'Heartbeats'" />
     <span class="navbar-label">Heartbeats</span>
     <span v-if="failedHeartbeatsCount > 0" class="badge badge-important" aria-label="Alert Count">{{ failedHeartbeatsCount }}</span>
   </RouterLink>
diff --git a/src/Frontend/src/components/monitoring/MonitoringMenuItem.vue b/src/Frontend/src/components/monitoring/MonitoringMenuItem.vue
index f74ab14f6..00d123cf7 100644
--- a/src/Frontend/src/components/monitoring/MonitoringMenuItem.vue
+++ b/src/Frontend/src/components/monitoring/MonitoringMenuItem.vue
@@ -8,7 +8,7 @@ import { faChartLine } from "@fortawesome/free-solid-svg-icons";
 
 <template>
   <RouterLink :to="routeLinks.monitoring.root">
-    <FAIcon :icon="faChartLine" v-tippy="`Monitoring`" />
+    <FAIcon :icon="faChartLine" v-tippy="'Monitoring'" />
     <span class="navbar-label">Monitoring</span>
     <span v-if="stats.number_of_disconnected_endpoints > 0" class="badge badge-important">{{ stats.number_of_disconnected_endpoints }}</span>
   </RouterLink>
diff --git a/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue b/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
index 6f1f16aa2..0fd86a0ea 100644
--- a/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
+++ b/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
@@ -7,7 +7,7 @@ import { faFileLines } from "@fortawesome/free-solid-svg-icons";
 
 <template>
   <RouterLink :to="routeLinks.throughput.root">
-    <FAIcon :icon="faFileLines" v-tippy="`Usage`" />
+    <FAIcon :icon="faFileLines" v-tippy="'Usage'" />
     <span class="navbar-label">Usage</span>
   </RouterLink>
 </template>