use skeletons' popup integration

src/lib/components/FramePreview.svelte

@@ -10,7 +10,7 @@
 <script lang="ts">
 	import { frames, mode } from '../store';
 
-	import { ProgressRadial } from '@skeletonlabs/skeleton';
+	import { ProgressRadial, popup } from '@skeletonlabs/skeleton';
 	import { debug, info } from '$lib/logging';
 	import { loadGif, loadImage } from '$lib/io';
 	import { keepFocused } from '$lib/state';
@@ -97,7 +97,7 @@
 			}
 		}
 
-		fileInput.value = "";
+		fileInput.value = '';
 		loading = false;
 	};
 
@@ -107,7 +107,7 @@
 	};
 
 	const handleCancel = () => {
-		if(loading && fileInput?.value.length === 0) loading = false;
+		if (loading && fileInput?.value.length === 0) loading = false;
 	};
 
 	let fileInput: HTMLInputElement;
@@ -119,18 +119,23 @@
 	<input
 		bind:this={fileInput}
 		type="file"
-		bind:files={files}
+		bind:files
 		on:change={finishLoad}
-		on:input={() => debug("This is the input event")}
+		on:input={() => debug('This is the input event')}
 		class="hidden"
 		accept="image/png, image/jpeg, image/tiff, image/gif"
 	/>
 {/if}
 
 <button
-	class="btn btn-xl p-4 w-24 md:w-32 variant-soft-primary border-token border-primary-400-500-token aspect-square cursor-pointer z-50"
+	use:popup={{
+		event: 'hover',
+		target: `usageHint${index}`,
+		placement: 'right',
+		middleware: {}
+	}}
+	class="[&>*]:pointer-events-none btn btn-xl p-4 w-24 md:w-32 variant-soft-primary border-token border-primary-400-500-token aspect-square cursor-pointer z-50"
 	aria-label="Preview of frame {index + 1}"
-
 	on:click={(e) => {
 		if (e.shiftKey) {
 			clearImage();
@@ -145,3 +150,8 @@
 		<img {src} alt="Frame {{ index }}" class="w-full" />
 	{/if}
 </button>
+
+<div data-popup="usageHint{index}">
+	<span class="card variant-filled-surface p-4 rounded">{hints[index]}</span>
+	<div class="arrow variant-filled-surface" />
+</div>