switch to using tippy for tool tips

Author: soujay

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>

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" />

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>

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>

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>

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>

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>

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>