Lib: Add tooltip capability to LazyImage

src/lib/components/LazyImage.svelte

@@ -2,6 +2,8 @@
   import type { HTMLImgAttributes } from "svelte/elements";
   import { lazyload } from "$lib/lazyload";
   import { fetch_image_base64 } from "$lib/image";
+  import { popup, type PopupSettings } from "@skeletonlabs/skeleton";
+  import { v4 as uuidv4 } from "uuid";
 
   interface LazyImageProps extends HTMLImgAttributes {
     /** The URL to the image resource to lazyload */
@@ -24,6 +26,9 @@
 
     /** Slightly zoom the image on mouse-hover */
     hoverzoom?: boolean;
+
+    /** Optional tooltip text */
+    tooltip?: string;
   }
 
   let {
@@ -34,6 +39,7 @@
     containerstyle = undefined,
     imgclass = "",
     hoverzoom = false,
+    tooltip = undefined,
     ...restProps
   }: LazyImageProps = $props();
 
@@ -49,6 +55,14 @@
   const img_opacity_handler = (node: HTMLElement) => {
     setTimeout(() => (node.style.opacity = "1"), 20);
   };
+
+  // Tooltip handling
+  const tooltipId: string = uuidv4();
+  const popupTooltip: PopupSettings = {
+    event: "hover",
+    target: tooltipId,
+    placement: "top",
+  };
 </script>
 
 <!-- Show a correctly sized div so the layout doesn't jump. -->
@@ -67,8 +81,16 @@
         class="bg-surface-100 transition-all {imgclass} {hoverzoom ? 'hover:scale-105' : ''}"
         style="opacity: 0; transition-duration: 300ms; {imgstyle ?? ''}"
         draggable="false"
+        use:popup={popupTooltip}
         {...restProps}
       />
     {/await}
   {/if}
 </div>
+
+{#if tooltip}
+  <div class="card variant-filled-surface p-2 shadow" data-popup={tooltipId}>
+    <p>{tooltip}</p>
+    <div class="variant-filled-surface arrow"></div>
+  </div>
+{/if}