Implement WithTooltip

ts/deckoptions/CheckBoxRow.svelte

@@ -6,7 +6,8 @@
     import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
+    import WithTooltip from "./WithTooltip.svelte";
+    import Label from "./Label.svelte";
     import CheckBox from "./CheckBox.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -18,13 +19,15 @@
 <Row>
     <Col>
         <CheckBox bind:value
-            ><span
-                ><slot />
-                {#if markdownTooltip}<HelpPopup
-                        html={marked(markdownTooltip)}
-                    />{/if}</span
-            ></CheckBox
-        >
+            >{#if markdownTooltip}<WithTooltip
+                    tooltip={marked(markdownTooltip)}
+                    let:createTooltip
+                >
+                    <Label on:mount={(event) => createTooltip(event.detail.span)}
+                        ><slot /></Label
+                    >
+                </WithTooltip>{:else}<Label><slot /></Label>{/if}
+        </CheckBox>
     </Col>
     <Col grow={false}>
         <RevertButton bind:value {defaultValue} />

ts/deckoptions/EnumSelectorRow.svelte

@@ -8,7 +8,8 @@
     import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
+    import WithTooltip from "./WithTooltip.svelte";
+    import Label from "./Label.svelte";
     import EnumSelector from "./EnumSelector.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -21,7 +22,11 @@
 
 <Row>
     <Col size={7}>
-        <span><slot /><HelpPopup html={marked(markdownTooltip)} /></span>
+        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
+            <Label on:mount={(event) => createTooltip(event.detail.span)}
+                ><slot /></Label
+            >
+        </WithTooltip>
     </Col>
     <Col {breakpoint} size={5}>
         <EnumSelector bind:value {choices} />

ts/deckoptions/Label.svelte

@@ -0,0 +1,17 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import { onMount, createEventDispatcher } from "svelte";
+
+    const dispatch = createEventDispatcher();
+
+    let spanRef: HTMLSpanElement;
+
+    onMount(() => {
+        dispatch("mount", { span: spanRef });
+    });
+</script>
+
+<span bind:this={spanRef}><slot /></span>

ts/deckoptions/SpinBoxFloatRow.svelte

@@ -6,7 +6,8 @@
     import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
+    import WithTooltip from "./WithTooltip.svelte";
+    import Label from "./Label.svelte";
     import SpinBoxFloat from "./SpinBoxFloat.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -19,7 +20,11 @@
 
 <Row>
     <Col size={7}>
-        <span><slot /><HelpPopup html={marked(markdownTooltip)} /></span>
+        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
+            <Label on:mount={(event) => createTooltip(event.detail.span)}
+                ><slot /></Label
+            >
+        </WithTooltip>
     </Col>
     <Col size={5}>
         <SpinBoxFloat bind:value {min} {max} />

ts/deckoptions/SpinBoxRow.svelte

@@ -6,7 +6,9 @@
     import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
+    /* import HelpPopup from "./HelpPopup.svelte"; */
+    import WithTooltip from "./WithTooltip.svelte";
+    import Label from "./Label.svelte";
     import SpinBox from "./SpinBox.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -19,7 +21,11 @@
 
 <Row>
     <Col size={7}>
-        <span><slot /><HelpPopup html={marked(markdownTooltip)} /></span>
+        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
+            <Label on:mount={(event) => createTooltip(event.detail.span)}
+                ><slot /></Label
+            >
+        </WithTooltip>
     </Col>
     <Col size={5}>
         <SpinBox bind:value {min} {max} />

ts/deckoptions/StepsInputRow.svelte

@@ -6,7 +6,8 @@
     import marked from "marked";
     import Row from "./Row.svelte";
     import Col from "./Col.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
+    import WithTooltip from "./WithTooltip.svelte";
+    import Label from "./Label.svelte";
     import StepsInput from "./StepsInput.svelte";
     import RevertButton from "./RevertButton.svelte";
 
@@ -17,7 +18,11 @@
 
 <Row>
     <Col size={7}>
-        <span><slot /><HelpPopup html={marked(markdownTooltip)} /></span>
+        <WithTooltip tooltip={marked(markdownTooltip)} let:createTooltip>
+            <Label on:mount={(event) => createTooltip(event.detail.span)}
+                ><slot /></Label
+            >
+        </WithTooltip>
     </Col>
     <Col size={5}>
         <StepsInput bind:value />

ts/deckoptions/WithTooltip.svelte

@@ -0,0 +1,35 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import { getContext } from "svelte";
+    import { nightModeKey } from "components/contextKeys";
+    import Tooltip from "bootstrap/js/dist/tooltip";
+
+    export let tooltip: string;
+
+    function createTooltip(element: HTMLElement): void {
+        element.title = tooltip;
+        new Tooltip(element, {
+            placement: "bottom",
+            html: true,
+            offset: [0, 20],
+        });
+    }
+
+    const nightMode = getContext<boolean>(nightModeKey);
+</script>
+
+<span class:night-mode={nightMode}><slot {createTooltip} /></span>
+
+<style lang="scss">
+    span {
+        text-decoration: underline dashed;
+        text-decoration-color: rgba(0 0 0 / 0.5);
+    }
+
+    .night-mode {
+        text-decoration-color: rgba(255 255 255 / 0.5);
+    }
+</style>