From 7058d14d25b00d56566e52f5dd1366bb762a1dcb Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Thu, 8 Jul 2021 21:47:27 +0200
Subject: [PATCH] Move WithTooltip to components

---
 ts/components/WithTooltip.svelte    | 38 +++++++++++++++++++++++++++++
 ts/deck-options/TooltipLabel.svelte |  2 +-
 ts/deck-options/WithTooltip.svelte  |  6 +----
 3 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 ts/components/WithTooltip.svelte

diff --git a/ts/components/WithTooltip.svelte b/ts/components/WithTooltip.svelte
new file mode 100644
index 000000000..f451b50ab
--- /dev/null
+++ b/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} />
diff --git a/ts/deck-options/TooltipLabel.svelte b/ts/deck-options/TooltipLabel.svelte
index 44ccff33a..9915ac25d 100644
--- a/ts/deck-options/TooltipLabel.svelte
+++ b/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";
 
diff --git a/ts/deck-options/WithTooltip.svelte b/ts/deck-options/WithTooltip.svelte
index b329daf22..f451b50ab 100644
--- a/ts/deck-options/WithTooltip.svelte
+++ b/ts/deck-options/WithTooltip.svelte
@@ -32,11 +32,7 @@
         });
     }
 
-    onDestroy(() => {
-        if (tooltipObject) {
-            tooltipObject.dispose();
-        }
-    });
+    onDestroy(() => tooltipObject?.dispose());
 </script>
 
 <slot {createTooltip} {tooltipObject} />