From aeb6de916696df2703091f93f040faefde86b8ac Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Mon, 22 Feb 2021 14:10:35 +0100
Subject: [PATCH] Move tooltip creation into function

---
 ts/graphs/tooltip.ts | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/ts/graphs/tooltip.ts b/ts/graphs/tooltip.ts
index 3e402fe56..ecce4562e 100644
--- a/ts/graphs/tooltip.ts
+++ b/ts/graphs/tooltip.ts
@@ -3,11 +3,24 @@
 
 import throttle from "lodash.throttle";
 
-const tooltipDiv: HTMLDivElement = document.createElement("div");
-tooltipDiv.className = "graph-tooltip";
-document.body.appendChild(tooltipDiv);
+function getOrCreateTooltipDiv(): HTMLDivElement {
+    const existingTooltip = document.getElementById("graphTooltip") as HTMLDivElement;
+
+    if (existingTooltip) {
+        return existingTooltip;
+    }
+
+    const tooltipDiv: HTMLDivElement = document.createElement("div");
+    tooltipDiv.id = "graphTooltip";
+    tooltipDiv.className = "graph-tooltip";
+    document.body.appendChild(tooltipDiv);
+
+    return tooltipDiv
+}
 
 function showTooltipInner(msg: string, x: number, y: number): void {
+    const tooltipDiv = getOrCreateTooltipDiv();
+
     tooltipDiv.innerHTML = msg;
 
     // move tooltip away from edge as user approaches right side
@@ -26,6 +39,8 @@ function showTooltipInner(msg: string, x: number, y: number): void {
 export const showTooltip = throttle(showTooltipInner, 16);
 
 export function hideTooltip(): void {
+    const tooltipDiv = getOrCreateTooltipDiv();
+
     showTooltip.cancel();
     tooltipDiv.style.opacity = "0";
 }