Move tooltip creation into function

This commit is contained in:
Henrik Giesel 2021-02-22 14:10:35 +01:00
parent 69448365c4
commit aeb6de9166

View File

@ -3,11 +3,24 @@
import throttle from "lodash.throttle"; import throttle from "lodash.throttle";
function getOrCreateTooltipDiv(): HTMLDivElement {
const existingTooltip = document.getElementById("graphTooltip") as HTMLDivElement;
if (existingTooltip) {
return existingTooltip;
}
const tooltipDiv: HTMLDivElement = document.createElement("div"); const tooltipDiv: HTMLDivElement = document.createElement("div");
tooltipDiv.id = "graphTooltip";
tooltipDiv.className = "graph-tooltip"; tooltipDiv.className = "graph-tooltip";
document.body.appendChild(tooltipDiv); document.body.appendChild(tooltipDiv);
return tooltipDiv
}
function showTooltipInner(msg: string, x: number, y: number): void { function showTooltipInner(msg: string, x: number, y: number): void {
const tooltipDiv = getOrCreateTooltipDiv();
tooltipDiv.innerHTML = msg; tooltipDiv.innerHTML = msg;
// move tooltip away from edge as user approaches right side // 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 const showTooltip = throttle(showTooltipInner, 16);
export function hideTooltip(): void { export function hideTooltip(): void {
const tooltipDiv = getOrCreateTooltipDiv();
showTooltip.cancel(); showTooltip.cancel();
tooltipDiv.style.opacity = "0"; tooltipDiv.style.opacity = "0";
} }