diff --git a/src/Frontend/src/components/FAIcon.vue b/src/Frontend/src/components/FAIcon.vue
index 61c1c0529..8d550f9cb 100644
--- a/src/Frontend/src/components/FAIcon.vue
+++ b/src/Frontend/src/components/FAIcon.vue
@@ -13,5 +13,5 @@ withDefaults(
 </script>
 
 <template>
-  <FontAwesomeIcon :icon="icon" :size="size" :title="title" />
+  <FontAwesomeIcon :icon="icon" :size="size" v-tippy="title" />
 </template>
diff --git a/src/Frontend/src/components/audit/AuditMenuItem.vue b/src/Frontend/src/components/audit/AuditMenuItem.vue
index 91abe0b0c..ff80a9061 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" title="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 1747bd258..e5d4716cd 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" title="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 3e1ef2e08..5b932409a 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" title="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 f103be6e6..28d1efdfa 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" title="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 c90f56127..a1dd1a6da 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" title="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 c80e2fd6e..3fe99b63e 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" 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>
   </RouterLink>
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue b/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
index d34808a79..73a41a572 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" title="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 00d123cf7..848fdbe6b 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" 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>
   </RouterLink>
diff --git a/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue b/src/Frontend/src/views/throughputreport/ThroughputMenuItem.vue
index 0fd86a0ea..bcdd9a0e5 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" title="Usage" />
     <span class="navbar-label">Usage</span>
   </RouterLink>
 </template>