From 6578a7f6450608a044836e3fe3406b3b640a3aa9 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Sat, 3 Feb 2024 00:05:50 -0800
Subject: feat(tooltip): debounce for move

---
 src/lib/Tooltip/tooltip.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

(limited to 'src/lib')

diff --git a/src/lib/Tooltip/tooltip.ts b/src/lib/Tooltip/tooltip.ts
index 48449352..cefaa29f 100644
--- a/src/lib/Tooltip/tooltip.ts
+++ b/src/lib/Tooltip/tooltip.ts
@@ -3,7 +3,9 @@ const tooltip = (element: HTMLElement) => {
 	const offset = 10;
 	const tooltipTransitionTime = 200;
 	const tooltipHideDelay = 10;
+	const debounceDelay = 100;
 	let hideTimeout: number | undefined = undefined;
+	let debounceTimer: number;
 
 	const createTooltip = () => {
 		if (!tooltipDiv) {
@@ -12,7 +14,7 @@ const tooltip = (element: HTMLElement) => {
 			tooltipDiv.style.position = 'absolute';
 			tooltipDiv.style.zIndex = '1000';
 			tooltipDiv.style.opacity = '0';
-			tooltipDiv.style.transition = `opacity ${tooltipTransitionTime}ms ease-in-out`;
+			tooltipDiv.style.transition = `opacity ${tooltipTransitionTime}ms ease-in-out, top 0.3s ease, left 0.3s ease`;
 			tooltipDiv.style.pointerEvents = 'none';
 			tooltipDiv.style.whiteSpace = 'nowrap';
 
@@ -77,8 +79,12 @@ const tooltip = (element: HTMLElement) => {
 	});
 
 	element.addEventListener('mousemove', (event) => {
-		if (tooltipDiv && tooltipDiv.style.opacity === '1')
-			updateTooltipPosition(event.pageX, event.pageY);
+		if (debounceTimer) clearTimeout(debounceTimer);
+
+		debounceTimer = window.setTimeout(() => {
+			if (tooltipDiv && tooltipDiv.style.opacity === '1')
+				updateTooltipPosition(event.pageX, event.pageY);
+		}, debounceDelay);
 	});
 
 	element.addEventListener('mouseleave', () => {
@@ -93,6 +99,8 @@ const tooltip = (element: HTMLElement) => {
 			element.removeEventListener('mouseleave', hideTooltip as EventListener);
 
 			if (hideTimeout) clearTimeout(hideTimeout);
+			if (debounceTimer) clearTimeout(debounceTimer);
+
 			if (tooltipDiv && document.body.contains(tooltipDiv)) {
 				document.body.removeChild(tooltipDiv);
 
-- 
cgit v1.2.3