From 6ddbf7bc1012dbdafcb25dabf51473b9f902ff46 Mon Sep 17 00:00:00 2001
From: BlueGreenMagick <bluegreenmagick@gmail.com>
Date: Thu, 19 May 2022 10:08:57 +0900
Subject: [PATCH] Fix graphs tooltip incorrect position (#1872)

---
 ts/graphs/Tooltip.svelte | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/ts/graphs/Tooltip.svelte b/ts/graphs/Tooltip.svelte
index 0a5b16b32..8a381f805 100644
--- a/ts/graphs/Tooltip.svelte
+++ b/ts/graphs/Tooltip.svelte
@@ -3,6 +3,8 @@ Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
+    import { tick } from "svelte";
+
     export let html = "";
     export let x: number = 0;
     export let y: number = 0;
@@ -13,9 +15,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     let adjustedX: number, adjustedY: number;
 
     let shiftLeftAmount = 0;
-    $: shiftLeftAmount = container
-        ? Math.round(container.clientWidth * 1.2 * (x / document.body.clientWidth))
-        : 0;
+    $: onXChange(x);
+
+    async function onXChange(xPos: number) {
+        await tick();
+        shiftLeftAmount = container
+            ? Math.round(
+                  container.clientWidth * 1.2 * (xPos / document.body.clientWidth),
+              )
+            : 0;
+    }
 
     $: {
         // move tooltip away from edge as user approaches right side
@@ -35,6 +44,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
     .tooltip {
         position: absolute;
+        white-space: nowrap;
         padding: 15px;
         border-radius: 5px;
         font-size: 15px;