Merge pull request #1984 from solliancenet/jdh-tooltips-0.8.4

(0.8.4) Add username tooltip and add tooltip component to Management Portal

Author: ciprianjichici

src/ui/ManagementPortal/components/Sidebar.vue

@@ -76,7 +76,16 @@
 			<UserAvatar class="sidebar__avatar" size="large" />
 
 			<div>
-				<span class="sidebar__username">{{ $authStore.currentAccount?.name }}</span>
+				<VTooltip :auto-hide="isMobile" :popper-triggers="isMobile ? [] : ['hover']">
+					<span
+						class="sidebar__username"
+						aria-label="Logged in as {{ $authStore.currentAccount?.username }}">
+						{{ $authStore.currentAccount?.name }}
+					</span>
+					<template #popper>
+						<div role="tooltip">Logged in as {{ $authStore.currentAccount?.username }}</div>
+					</template>
+				</VTooltip>
 				<Button
 					class="sidebar__sign-out-button"
 					icon="pi pi-sign-out"
@@ -93,6 +102,12 @@
 <script lang="ts">
 export default {
 	name: 'Sidebar',
+
+	data() {
+		return {
+			isMobile: window.screen.width < 950,
+		};
+	},
 };
 </script>
 

src/ui/ManagementPortal/nuxt.config.ts

@@ -17,7 +17,7 @@ export default defineNuxtConfig({
 	compatibilityDate: '2024-08-27',
 	ssr: false,
 	devtools: { enabled: true },
-	modules: ['@pinia/nuxt', '@nuxtjs/eslint-module'],
+	modules: ['@pinia/nuxt', '@nuxtjs/eslint-module', 'floating-vue/nuxt'],
 	components: true,
 	app: {
 		head: {

src/ui/ManagementPortal/package-lock.json

@@ -39,6 +39,7 @@
 		"@pinia/nuxt": "^0.5.4",
 		"@vue-js-cron/light": "^4.0.5",
 		"@vueup/vue-quill": "^1.2.0",
+		"floating-vue": "^2.0.0",
 		"lodash": "^4.17.21",
 		"md5": "^2.3.0",
 		"pinia": "^2.2.2",

src/ui/ManagementPortal/package.json

@@ -56,5 +56,4 @@ export default defineNuxtPlugin((nuxtApp) => {
 	nuxtApp.vueApp.component('InputSwitch', InputSwitch);
 
 	nuxtApp.vueApp.use(ToastService);
-	nuxtApp.vueApp.directive('tooltip', Tooltip);
 });

src/ui/ManagementPortal/plugins/primevue.ts

@@ -109,7 +109,16 @@
 			<UserAvatar size="large" class="chat-sidebar__avatar" />
 
 			<div>
-				<span class="chat-sidebar__username">{{ $authStore.currentAccount?.name }}</span>
+				<VTooltip :auto-hide="isMobile" :popper-triggers="isMobile ? [] : ['hover']">
+					<span
+						class="chat-sidebar__username"
+						aria-label="Logged in as {{ $authStore.currentAccount?.username }}">
+						{{ $authStore.currentAccount?.name }}
+					</span>
+					<template #popper>
+						<div role="tooltip">Logged in as {{ $authStore.currentAccount?.username }}</div>
+					</template>
+				</VTooltip>
 				<div class="chat-sidebar__options">
 					<Button
 						class="chat-sidebar__sign-out chat-sidebar__button"
@@ -257,7 +266,7 @@
 </template>
 
 <script lang="ts">
-import { hideAllPoppers } from 'floating-vue';
+import { hideAllPoppers, VTooltip } from 'floating-vue';
 import type { Session } from '@/js/types';
 declare const process: any;