From aeb6de916696df2703091f93f040faefde86b8ac Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Mon, 22 Feb 2021 14:10:35 +0100 Subject: [PATCH 1/3] 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"; } From 3d4323b1d43c08fa55be16fef4d3e80cbbcd7076 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Mon, 22 Feb 2021 14:17:56 +0100 Subject: [PATCH 2/3] Load graphs.js from head * Also move script into body, to be a valid HTML document --- ts/graphs/graphs.html | 45 ++++++++++++++++++++++--------------------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/ts/graphs/graphs.html b/ts/graphs/graphs.html index bf8a9bdf9..c73ddda18 100644 --- a/ts/graphs/graphs.html +++ b/ts/graphs/graphs.html @@ -4,30 +4,31 @@ + +
+ + - - - From ec9c623d349d42dfd6a5fd7c3d12fe924d365b64 Mon Sep 17 00:00:00 2001 From: Henrik Giesel Date: Mon, 22 Feb 2021 14:44:31 +0100 Subject: [PATCH 3/3] Satisfy formatter --- ts/graphs/tooltip.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/graphs/tooltip.ts b/ts/graphs/tooltip.ts index ecce4562e..ea12a0668 100644 --- a/ts/graphs/tooltip.ts +++ b/ts/graphs/tooltip.ts @@ -15,7 +15,7 @@ function getOrCreateTooltipDiv(): HTMLDivElement { tooltipDiv.className = "graph-tooltip"; document.body.appendChild(tooltipDiv); - return tooltipDiv + return tooltipDiv; } function showTooltipInner(msg: string, x: number, y: number): void {