feat: add tooltips

works on desktop and mobile. also shows the clear button text on mobile only, tooltip on pc

src/lib/components/functional/ConversionPanel.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-	import { effects, files } from "$lib/store/index.svelte";
+	import { effects, files, isMobile } from "$lib/store/index.svelte";
 	import { FolderArchiveIcon, RefreshCw, Trash2Icon } from "lucide-svelte";
 	import Panel from "../visual/Panel.svelte";
 	import Dropdown from "./Dropdown.svelte";
+	import Tooltip from "../visual/Tooltip.svelte";
 </script>
 
 <Panel
@@ -27,13 +28,30 @@
 			<FolderArchiveIcon size="24" />
 			<p>Download all as .zip</p>
 		</button>
-		<button
+		{#if $isMobile}
-			class="btn p-4 {$effects ? '' : '!scale-100'} flex gap-3 max-md:w-full"
+			<button
-			disabled={files.files.length === 0}
+				class="btn p-4 {$effects
-			onclick={() => files.files = []}
+					? ''
-		>
+					: '!scale-100'} flex gap-3 max-md:w-full"
-			<Trash2Icon size="24" />
+				disabled={files.files.length === 0}
-		</button>
+				onclick={() => (files.files = [])}
+			>
+				<Trash2Icon size="24" />
+				<p>Remove all files</p>
+			</button>
+		{:else}
+			<Tooltip text="Remove all files" position="right">
+				<button
+					class="btn p-4 {$effects
+						? ''
+						: '!scale-100'} flex gap-3 max-md:w-full"
+					disabled={files.files.length === 0}
+					onclick={() => (files.files = [])}
+				>
+					<Trash2Icon size="24" />
+				</button>
+			</Tooltip>
+		{/if}
 	</div>
 	<div class="w-full bg-separator h-0.5 flex md:hidden"></div>
 	<div class="flex items-center gap-2">

src/lib/components/visual/Tooltip.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	interface Props {
+		children: () => any;
+		text: string;
+		position?: "top" | "bottom" | "left" | "right";
+	}
+
+	let { children, text, position = "top" }: Props = $props();
+	let showTooltip = $state(false);
+	let timeout: number = 0;
+
+	function show() {
+		timeout = setTimeout(() => {
+			showTooltip = true;
+		}, 500);
+	}
+
+	function hide() {
+		showTooltip = false;
+		clearTimeout(timeout);
+	}
+</script>
+
+<div
+	class="relative inline-block"
+	onmouseenter={show}
+	onmouseleave={hide}
+	onfocusin={show}
+	onfocusout={hide}
+	ontouchstart={show}
+	ontouchend={hide}
+	role="tooltip"
+>
+	{@render children()}
+	{#if showTooltip}
+		<div class="tooltip tooltip-{position}">
+			{text}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.tooltip {
+		@apply absolute z-10 bg-panel-alt text-foreground border-2 border-stone-400 dynadark:border-white drop-shadow-lg text-xs px-4 py-2 rounded-full whitespace-nowrap pointer-events-none;
+	}
+
+	.tooltip-top {
+		@apply bottom-full left-1/2 -translate-x-1/2 mb-3;
+	}
+
+	.tooltip-top::after {
+		@apply content-[""] absolute top-full left-1/2 -ml-2 border-8 border-x-transparent border-b-transparent border-t-inherit;
+	}
+
+	.tooltip-bottom {
+		@apply top-full left-1/2 -translate-x-1/2 mt-3;
+	}
+
+	.tooltip-bottom::after {
+		@apply content-[""] absolute bottom-full left-1/2 -ml-2 border-8 border-x-transparent border-t-transparent border-b-inherit;
+	}
+
+	.tooltip-left {
+		@apply right-full top-1/2 -translate-y-1/2 mr-3;
+	}
+
+	.tooltip-left::after {
+		@apply content-[""] absolute top-1/2 left-full -mt-2 border-8 border-y-transparent border-r-transparent border-l-inherit;
+	}
+
+	.tooltip-right {
+		@apply left-full top-1/2 -translate-y-1/2 ml-3;
+	}
+
+	.tooltip-right::after {
+		@apply content-[""] absolute top-1/2 right-full -mt-2 border-8 border-y-transparent border-l-transparent border-r-inherit;
+	}
+</style>

src/routes/convert/+page.svelte

@@ -4,6 +4,7 @@
 	import Uploader from "$lib/components/functional/Uploader.svelte";
 	import Panel from "$lib/components/visual/Panel.svelte";
 	import ProgressBar from "$lib/components/visual/ProgressBar.svelte";
+	import Tooltip from "$lib/components/visual/Tooltip.svelte";
 	import {
 		effects,
 		files,
@@ -192,28 +193,35 @@
 							onselect={(option) => handleSelect(option, file)}
 						/>
 						<div class="w-full flex items-center justify-between">
-							<button
+							<Tooltip text="Convert this file" position="bottom">
-								class="btn {$effects
+								<button
-									? ''
+									class="btn {$effects
-									: '!scale-100'} p-0 w-14 h-14 text-black {isAudio
+										? ''
-									? 'bg-accent-purple'
+										: '!scale-100'} p-0 w-14 h-14 text-black {isAudio
-									: isVideo
+										? 'bg-accent-purple'
-										? 'bg-accent-red'
+										: isVideo
-										: 'bg-accent-blue'}"
+											? 'bg-accent-red'
-								disabled={!files.ready}
+											: 'bg-accent-blue'}"
-								onclick={file.convert}
+									disabled={!files.ready}
+									onclick={file.convert}
+								>
+									<RotateCwIcon size="24" />
+								</button>
+							</Tooltip>
+							<Tooltip
+								text="Download this file"
+								position="bottom"
 							>
-								<RotateCwIcon size="24" />
+								<button
-							</button>
+									class="btn {$effects
-							<button
+										? ''
-								class="btn {$effects
+										: '!scale-100'} p-0 w-14 h-14"
-									? ''
+									onclick={file.download}
-									: '!scale-100'} p-0 w-14 h-14"
+									disabled={!file.result}
-								onclick={file.download}
+								>
-								disabled={!file.result}
+									<DownloadIcon size="24" />
-							>
+								</button>
-								<DownloadIcon size="24" />
+							</Tooltip>
-							</button>
 						</div>
 					</div>
 				</div>