From 6e12348cfd92b266406d1598464626a1c95fcb39 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Sun, 21 Mar 2021 19:35:25 +1000
Subject: [PATCH] add Tooltip.svelte so we can encapsulating styling

---
 ts/graphs/Tooltip.svelte     | 50 ++++++++++++++++++++++++++++++++++++
 ts/graphs/graphs_shared.scss | 16 ------------
 ts/graphs/tooltip.ts         | 39 ++++++++++------------------
 3 files changed, 63 insertions(+), 42 deletions(-)
 create mode 100644 ts/graphs/Tooltip.svelte

diff --git a/ts/graphs/Tooltip.svelte b/ts/graphs/Tooltip.svelte
new file mode 100644
index 000000000..d6d4b27db
--- /dev/null
+++ b/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>
diff --git a/ts/graphs/graphs_shared.scss b/ts/graphs/graphs_shared.scss
index bd2aa4615..bc75c3206 100644
--- a/ts/graphs/graphs_shared.scss
+++ b/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;
diff --git a/ts/graphs/tooltip.ts b/ts/graphs/tooltip.ts
index ea12a0668..d75385f88 100644
--- a/ts/graphs/tooltip.ts
+++ b/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 {
-    const existingTooltip = document.getElementById("graphTooltip") as HTMLDivElement;
+let tooltip: Tooltip | null = null;
 
-    if (existingTooltip) {
-        return existingTooltip;
+function getOrCreateTooltip(): Tooltip {
+    if (tooltip) {
+        return tooltip;
     }
 
-    const tooltipDiv: HTMLDivElement = document.createElement("div");
-    tooltipDiv.id = "graphTooltip";
-    tooltipDiv.className = "graph-tooltip";
-    document.body.appendChild(tooltipDiv);
+    const target = document.createElement("div");
+    tooltip = new Tooltip({ target });
+    document.body.appendChild(target);
 
-    return tooltipDiv;
+    return tooltip;
 }
 
 function showTooltipInner(msg: string, x: number, y: number): void {
-    const tooltipDiv = getOrCreateTooltipDiv();
+    const tooltip = getOrCreateTooltip();
 
-    tooltipDiv.innerHTML = msg;
-
-    // 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";
+    tooltip.$set({ html: msg, x, y, show: true });
 }
 
 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 });
 }