feat(tooltip): debounce for move

1 files changed, 11 insertions, 3 deletions

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);