refactor(client): use composition api for tooltip logic

1 files changed, 44 insertions, 0 deletions

diff --git a/packages/client/src/scripts/use-tooltip.ts b/packages/client/src/scripts/use-tooltip.ts
new file mode 100644
index 0000000000..2c0c36400d
--- /dev/null
+++ b/packages/client/src/scripts/use-tooltip.ts
@@ -0,0 +1,44 @@
+import { Ref, ref } from 'vue';
+
+export function useTooltip(onShow: (showing: Ref<boolean>) => void) {
+	let isHovering = false;
+	let timeoutId: number;
+
+	let changeShowingState: (() => void) | null;
+
+	const open = () => {
+		close();
+		if (!isHovering) return;
+
+		const showing = ref(true);
+		onShow(showing);
+		changeShowingState = () => {
+			showing.value = false;
+		};
+	};
+
+	const close = () => {
+		if (changeShowingState != null) {
+			changeShowingState();
+			changeShowingState = null;
+		}
+	};
+
+	const onMouseover = () => {
+		if (isHovering) return;
+		isHovering = true;
+		timeoutId = window.setTimeout(open, 300);
+	};
+
+	const onMouseleave = () => {
+		if (!isHovering) return;
+		isHovering = false;
+		window.clearTimeout(timeoutId);
+		close();
+	};
+
+	return {
+		onMouseover,
+		onMouseleave,
+	};
+}