Revert "fix(tooltip): use fixed positioning and snappy cursor tracking"

This reverts commit 28860bb88da4c08e3ba383adc9c23ae3689310b6.

2 files changed, 15 insertions, 12 deletions

diff --git a/src/lib/Tooltip/LinkedTooltip.svelte b/src/lib/Tooltip/LinkedTooltip.svelte
index 94aab52b..b3fc6ae2 100644
--- a/src/lib/Tooltip/LinkedTooltip.svelte
+++ b/src/lib/Tooltip/LinkedTooltip.svelte
@@ -35,10 +35,7 @@ onDestroy(() => {
 const createTooltip = () => {
 	if (!tooltipDiv) {
 		tooltipDiv = document.createElement("div");
-		tooltipDiv.style.position = "fixed";
-		tooltipDiv.style.top = "-9999px";
-		tooltipDiv.style.left = "-9999px";
-		tooltipDiv.style.visibility = "hidden";
+		tooltipDiv.style.position = "absolute";
 		tooltipDiv.style.zIndex = "1000";
 		opacity = 0;
 		tooltipDiv.style.pointerEvents = "none";
diff --git a/src/lib/Tooltip/tooltip.ts b/src/lib/Tooltip/tooltip.ts
index 8c846a78..5772c33f 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 | null = null;
+	let debounceTimer: number | null = null;
 
 	if (element.dataset.tooltipDisable === "true") return;
 
@@ -11,14 +13,13 @@ const tooltip = (element: HTMLElement) => {
 		if (!tooltipDiv) {
 			tooltipDiv = document.createElement("div");
 
-			tooltipDiv.style.position = "fixed";
-			tooltipDiv.style.top = "-9999px";
-			tooltipDiv.style.left = "-9999px";
+			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";
+			tooltipDiv.style.zIndex = "1000";
 
 			tooltipDiv.classList.add("card");
 			tooltipDiv.classList.add("card-small");
@@ -46,7 +47,7 @@ const tooltip = (element: HTMLElement) => {
 					if (top < 0) top = rect.top + rect.height + offset;
 
 					tooltipDiv.style.left = `${left}px`;
-					tooltipDiv.style.top = `${top}px`;
+					tooltipDiv.style.top = `${top + window.scrollY}px`;
 
 					return;
 				}
@@ -115,14 +116,18 @@ const tooltip = (element: HTMLElement) => {
 			}
 
 			if (!tooltipDiv) {
-				showTooltip(title, event.clientX, event.clientY);
+				showTooltip(title, event.pageX, event.pageY);
 			}
 		}
 	};
 
 	const handleMouseMove = (event: MouseEvent) => {
-		if (tooltipDiv && tooltipDiv.style.opacity === "1")
-			updateTooltipPosition(event.clientX, event.clientY);
+		if (debounceTimer !== null) clearTimeout(debounceTimer);
+
+		debounceTimer = window.setTimeout(() => {
+			if (tooltipDiv && tooltipDiv.style.opacity === "1")
+				updateTooltipPosition(event.pageX, event.pageY);
+		}, debounceDelay);
 	};
 
 	const handleMouseLeave = () => {
@@ -144,6 +149,7 @@ const tooltip = (element: HTMLElement) => {
 			element.removeEventListener("mouseleave", handleMouseLeave);
 
 			if (hideTimeout !== null) clearTimeout(hideTimeout);
+			if (debounceTimer !== null) clearTimeout(debounceTimer);
 
 			if (tooltipDiv && document.body.contains(tooltipDiv)) {
 				document.body.removeChild(tooltipDiv);