Disable RevertButton tooltip on touch devices

The tooltip will show after you clicked Revert. There's no sensible way
to show the tooltip, without also triggering the functionality

ts/components/contextKeys.ts

@@ -1,6 +1,7 @@
 // Copyright: Ankitects Pty Ltd and contributors
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 export const nightModeKey = Symbol("nightMode");
+export const touchDeviceKey = Symbol("touchDevice");
 export const disabledKey = Symbol("disabled");
 
 export const sectionKey = Symbol("section");

ts/deckoptions/RevertButton.svelte

@@ -4,9 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
+    import { getContext } from "svelte";
     import WithTooltip from "./WithTooltip.svelte";
     import Badge from "./Badge.svelte";
     import { revertIcon } from "./icons";
+    import { touchDeviceKey } from "components/contextKeys";
     import { isEqual as isEqualLodash, cloneDeep } from "lodash-es";
 
     type T = unknown;
@@ -32,14 +34,24 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     function revert(): void {
         value = cloneDeep(defaultValue);
     }
+
+    const touchDevice = getContext<boolean>(touchDeviceKey);
 </script>
 
 <span class:invisible={!modified}>
-    <WithTooltip tooltip={tr.deckConfigRevertButtonTooltip()} let:createTooltip>
+    {#if touchDevice}
-        <Badge
+        <Badge class="px-1" on:click={revert}>{@html revertIcon}</Badge>
-            class="px-1"
+    {:else}
-            on:mount={(event) => createTooltip(event.detail.span)}
+        <WithTooltip
-            on:click={revert}>{@html revertIcon}</Badge
+            trigger="hover"
+            tooltip={tr.deckConfigRevertButtonTooltip()}
+            let:createTooltip
         >
-    </WithTooltip>
+            <Badge
+                class="px-1"
+                on:mount={(event) => createTooltip(event.detail.span)}
+                on:click={revert}>{@html revertIcon}</Badge
+            >
+        </WithTooltip>
+    {/if}
 </span>

ts/deckoptions/WithTooltip.svelte

@@ -39,4 +39,4 @@
     });
 </script>
 
-<slot {createTooltip} />
+<slot {createTooltip} {tooltipObject} />

ts/deckoptions/index.ts

@@ -14,7 +14,7 @@ import SpinBoxFloat from "./SpinBoxFloat.svelte";
 import EnumSelector from "./EnumSelector.svelte";
 import CheckBox from "./CheckBox.svelte";
 
-import { nightModeKey, modalsKey } from "components/contextKeys";
+import { nightModeKey, touchDeviceKey, modalsKey } from "components/contextKeys";
 
 export async function deckOptions(
     target: HTMLDivElement,
@@ -31,13 +31,16 @@ export async function deckOptions(
         }),
     ]);
 
-    const nightMode = checkNightMode();
     const context = new Map();
+    const nightMode = checkNightMode();
     context.set(nightModeKey, nightMode);
 
     const modals = new Map();
     context.set(modalsKey, modals);
 
+    const touchDevice = "ontouchstart" in document.documentElement;
+    context.set(touchDeviceKey, touchDevice);
+
     const state = new DeckOptionsState(deckId, info);
     return new DeckOptionsPage({
         target,