Move tooltip creation into function
This commit is contained in:
parent
69448365c4
commit
aeb6de9166
@ -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";
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user