Move WithTooltip to components

ts/components/WithTooltip.svelte

@@ -0,0 +1,38 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import { onDestroy } from "svelte";
+    import Tooltip from "bootstrap/js/dist/tooltip";
+
+    type TriggerType =
+        | "hover focus"
+        | "click"
+        | "hover"
+        | "focus"
+        | "manual"
+        | "click hover"
+        | "click focus"
+        | "click hover focus";
+
+    export let tooltip: string;
+    export let trigger: TriggerType = "hover focus";
+
+    let tooltipObject: Tooltip;
+
+    function createTooltip(element: HTMLElement): void {
+        element.title = tooltip;
+        tooltipObject = new Tooltip(element, {
+            placement: "bottom",
+            html: true,
+            offset: [0, 20],
+            delay: { show: 250, hide: 0 },
+            trigger,
+        });
+    }
+
+    onDestroy(() => tooltipObject?.dispose());
+</script>
+
+<slot {createTooltip} {tooltipObject} />

ts/deck-options/TooltipLabel.svelte

@@ -5,7 +5,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <script lang="typescript">
     import marked from "marked";
     import { infoCircle } from "./icons";
-    import WithTooltip from "./WithTooltip.svelte";
+    import WithTooltip from "components/WithTooltip.svelte";
     import Label from "./Label.svelte";
     import Badge from "components/Badge.svelte";
 

ts/deck-options/WithTooltip.svelte

@@ -32,11 +32,7 @@
         });
     }
 
-    onDestroy(() => {
+    onDestroy(() => tooltipObject?.dispose());
-        if (tooltipObject) {
-            tooltipObject.dispose();
-        }
-    });
 </script>
 
 <slot {createTooltip} {tooltipObject} />