add Tooltip.svelte so we can encapsulating styling

ts/graphs/Tooltip.svelte

@@ -0,0 +1,50 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    export let html = "";
+    export let x: number = 0;
+    export let y: number = 0;
+    export let show = true;
+
+    let container = (null as unknown) as HTMLDivElement;
+
+    let adjustedX, adjustedY: number;
+
+    let shiftLeftAmount = 0;
+    $: shiftLeftAmount = container
+        ? Math.round(container.clientWidth * 1.2 * (x / document.body.clientWidth))
+        : 0;
+
+    $: {
+        // move tooltip away from edge as user approaches right side
+        adjustedX = x + 40 - shiftLeftAmount;
+        adjustedY = y + 40;
+    }
+</script>
+
+<style lang="scss">
+    .tooltip {
+        position: absolute;
+        padding: 15px;
+        border-radius: 5px;
+        font-size: 15px;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.3s;
+        color: var(--text-fg);
+        background: var(--tooltip-bg);
+
+        :global(table) {
+            border-spacing: 1em 0;
+        }
+    }
+</style>
+
+<div
+    bind:this={container}
+    class="tooltip"
+    style="left: {adjustedX}px; top: {adjustedY}px; opacity: {show ? 1 : 0}">
+    {@html html}
+</div>

ts/graphs/graphs_shared.scss

@@ -21,22 +21,6 @@
     overscroll-behavior: none;
 }
 
-.graph-tooltip {
-    position: absolute;
-    padding: 15px;
-    border-radius: 5px;
-    font-size: 15px;
-    opacity: 0;
-    pointer-events: none;
-    transition: opacity 0.3s;
-    color: var(--text-fg);
-    background: var(--tooltip-bg);
-}
-
-.graph-tooltip table {
-    border-spacing: 1em 0;
-}
-
 .graph {
     margin-left: auto;
     margin-right: auto;

ts/graphs/tooltip.ts

@@ -2,45 +2,32 @@
 // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
 import throttle from "lodash.throttle";
+import Tooltip from "./Tooltip.svelte";
 
-function getOrCreateTooltipDiv(): HTMLDivElement {
+let tooltip: Tooltip | null = null;
-    const existingTooltip = document.getElementById("graphTooltip") as HTMLDivElement;
 
-    if (existingTooltip) {
+function getOrCreateTooltip(): Tooltip {
-        return existingTooltip;
+    if (tooltip) {
+        return tooltip;
     }
 
-    const tooltipDiv: HTMLDivElement = document.createElement("div");
+    const target = document.createElement("div");
-    tooltipDiv.id = "graphTooltip";
+    tooltip = new Tooltip({ target });
-    tooltipDiv.className = "graph-tooltip";
+    document.body.appendChild(target);
-    document.body.appendChild(tooltipDiv);
 
-    return tooltipDiv;
+    return tooltip;
 }
 
 function showTooltipInner(msg: string, x: number, y: number): void {
-    const tooltipDiv = getOrCreateTooltipDiv();
+    const tooltip = getOrCreateTooltip();
 
-    tooltipDiv.innerHTML = msg;
+    tooltip.$set({ html: msg, x, y, show: true });
-
-    // move tooltip away from edge as user approaches right side
-    const shiftLeftAmount = Math.round(
-        tooltipDiv.clientWidth * 1.2 * (x / document.body.clientWidth)
-    );
-
-    const adjustedX = x + 40 - shiftLeftAmount;
-    const adjustedY = y + 40;
-
-    tooltipDiv.style.left = `${adjustedX}px`;
-    tooltipDiv.style.top = `${adjustedY}px`;
-    tooltipDiv.style.opacity = "1";
 }
 
 export const showTooltip = throttle(showTooltipInner, 16);
 
 export function hideTooltip(): void {
-    const tooltipDiv = getOrCreateTooltipDiv();
+    const tooltip = getOrCreateTooltip();
-
     showTooltip.cancel();
-    tooltipDiv.style.opacity = "0";
+    tooltip.$set({ show: false });
 }