ui: fix tooltip

apps/ui/src/lib/components/UpdateAvailable.svelte

@@ -4,6 +4,7 @@
 	import { addToast, appSession, features } from '$lib/store';
 	import { asyncSleep, errorNotification } from '$lib/common';
 	import { onMount } from 'svelte';
+	import Tooltip from './Tooltip.svelte';
 
 	let isUpdateAvailable = false;
 	let updateStatus: any = {
@@ -75,14 +76,14 @@
 	});
 </script>
 
-<div class="flex flex-col space-y-4 py-2">
+<div class="py-2">
 	{#if $appSession.teamId === '0'}
 		{#if isUpdateAvailable}
 			<button
+				id="update"
 				disabled={updateStatus.success === false}
 				on:click={update}
-				class="icons tooltip tooltip-right tooltip-primary bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
+				class="icons bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
-				data-tip="Update Available!"
 			>
 				{#if updateStatus.loading}
 					<svg
@@ -183,6 +184,7 @@
 					>
 				{/if}
 			</button>
+			<Tooltip triggeredBy="#update" placement="right" color="bg-gradient-to-r from-purple-500 via-pink-500 to-red-500">New Version Available!</Tooltip>
 		{/if}
 	{/if}
 </div>

apps/ui/src/routes/__layout.svelte

@@ -132,9 +132,9 @@
 					<img src={$appSession.whiteLabeledDetails.icon} alt="White labeled logo" />
 				</div>
 			{/if}
-			<div class="flex flex-col space-y-2 py-2" class:mt-2={$appSession.whiteLabeled}>
+			<div class="flex flex-col space-y-2 py-2" id="dashboard" class:mt-2={$appSession.whiteLabeled}>
 				<a
-					id="dashboard"
+					
 					sveltekit:prefetch
 					href="/"
 					class="icons  hover:text-white"
@@ -160,6 +160,7 @@
 					</svg>
 				</a>
 			</div>
+			<Tooltip triggeredBy="#dashboard" placement="right">Dashboard</Tooltip>
 			<div class="flex-1" />
 
 			<UpdateAvailable />