feat(lib): tooltip action

1 files changed, 58 insertions, 0 deletions

diff --git a/src/lib/Tooltip/tooltip.ts b/src/lib/Tooltip/tooltip.ts
new file mode 100644
index 00000000..fd1428f4
--- /dev/null
+++ b/src/lib/Tooltip/tooltip.ts
@@ -0,0 +1,58 @@
+const tooltip = (element: HTMLElement) => {
+	let div: HTMLDivElement;
+	let title: string | null;
+	const offset = 10;
+	let timer: number;
+
+	const mouseOver = (event: MouseEvent) => {
+		title = element.getAttribute('title');
+
+		element.removeAttribute('title');
+
+		timer = window.setTimeout(() => {
+			div = document.createElement('div');
+			div.textContent = title;
+
+			div.setAttribute(
+				'style',
+				`position: absolute;
+			top: -${event.pageX - div.offsetWidth / 2}px;
+			left: -${event.pageY - div.offsetHeight - offset / 2}px;`
+			);
+
+			div.classList.add('card');
+			div.classList.add('card-small');
+			document.body.appendChild(div);
+		}, 0);
+	};
+
+	const mouseMove = (event: MouseEvent) => {
+		if (div) {
+			div.style.left = `${event.pageX - div.offsetWidth / 2}px`;
+			div.style.top = `${event.pageY - div.offsetHeight - offset / 2}px`;
+		}
+	};
+
+	const mouseLeave = () => {
+		clearTimeout(timer);
+
+		if (div) {
+			document.body.removeChild(div);
+			element.setAttribute('title', title as string);
+		}
+	};
+
+	element.addEventListener('mouseover', mouseOver);
+	element.addEventListener('mouseleave', mouseLeave);
+	element.addEventListener('mousemove', mouseMove);
+
+	return {
+		destroy() {
+			element.removeEventListener('mouseover', mouseOver);
+			element.removeEventListener('mouseleave', mouseLeave);
+			element.removeEventListener('mousemove', mouseMove);
+		}
+	};
+};
+
+export default tooltip;