Add tooltip

frontend/package.json

@@ -20,6 +20,7 @@
 		"@lucia-auth/adapter-postgresql": "^1.0.1",
 		"@neoconfetti/svelte": "^1.0.0",
 		"@playwright/test": "^1.34.0",
+		"@svelte-plugins/tooltips": "^0.1.6",
 		"@sveltejs/kit": "^1.18.0",
 		"@tailwindcss/typography": "^0.5.9",
 		"@types/cookie": "^0.5.1",

frontend/src/lib/components/Form.svelte

@@ -9,6 +9,8 @@
 <script lang="ts">
 	import { enhance } from '$app/forms'
 	import Button from './Button.svelte'
+	// @ts-ignore
+	import { Tooltip } from '@svelte-plugins/tooltips'
 
 	export let fields: Field[]
 	let valueChanged = false
@@ -40,7 +42,14 @@
 			on:input={() => (valueChanged = true)} />
 	{/each}
 	<br />
-	<Button type="submit" enabled={valueChanged}>Update</Button>
+
+	{#if valueChanged}
+		<Button type="submit" enabled={valueChanged}>Update</Button>
+	{:else}
+		<Tooltip theme="tooltips" content="No changes to submit">
+			<Button type="submit" enabled={valueChanged}>Update</Button>
+		</Tooltip>
+	{/if}
 </form>
 
 {#if !valueChanged}