Blame · tooltip.tsx

4dfd09b	1	"use client";
4dfd09b	2
4dfd09b	3	import {
4dfd09b	4	useState,
4dfd09b	5	useRef,
4dfd09b	6	useEffect,
4dfd09b	7	cloneElement,
4dfd09b	8	isValidElement,
4dfd09b	9	} from "react";
4dfd09b	10	import { createPortal } from "react-dom";
4dfd09b	11
4dfd09b	12	export interface TooltipProps {
4dfd09b	13	content: string;
4dfd09b	14	children: React.ReactElement;
4dfd09b	15	side?: "top" \| "bottom" \| "left" \| "right";
4dfd09b	16	delay?: number;
4dfd09b	17	}
4dfd09b	18
4dfd09b	19	export function Tooltip({
4dfd09b	20	content,
4dfd09b	21	children,
4dfd09b	22	side = "top",
4dfd09b	23	delay = 300,
4dfd09b	24	}: TooltipProps) {
4dfd09b	25	const [visible, setVisible] = useState(false);
4dfd09b	26	const [pos, setPos] = useState({ top: 0, left: 0 });
4dfd09b	27	const [mounted, setMounted] = useState(false);
4dfd09b	28	const triggerRef = useRef<HTMLElement>(null);
4dfd09b	29	const timerRef = useRef<ReturnType<typeof setTimeout> \| null>(null);
4dfd09b	30
4dfd09b	31	useEffect(() => {
4dfd09b	32	setMounted(true);
4dfd09b	33	return () => {
4dfd09b	34	if (timerRef.current) clearTimeout(timerRef.current);
4dfd09b	35	};
4dfd09b	36	}, []);
4dfd09b	37
4dfd09b	38	function show() {
4dfd09b	39	timerRef.current = setTimeout(() => {
4dfd09b	40	if (!triggerRef.current) return;
4dfd09b	41	const rect = triggerRef.current.getBoundingClientRect();
4dfd09b	42	const gap = 6;
4dfd09b	43
4dfd09b	44	let top = 0;
4dfd09b	45	let left = 0;
4dfd09b	46
4dfd09b	47	switch (side) {
4dfd09b	48	case "top":
4dfd09b	49	top = rect.top - gap + window.scrollY;
4dfd09b	50	left = rect.left + rect.width / 2 + window.scrollX;
4dfd09b	51	break;
4dfd09b	52	case "bottom":
4dfd09b	53	top = rect.bottom + gap + window.scrollY;
4dfd09b	54	left = rect.left + rect.width / 2 + window.scrollX;
4dfd09b	55	break;
4dfd09b	56	case "left":
4dfd09b	57	top = rect.top + rect.height / 2 + window.scrollY;
4dfd09b	58	left = rect.left - gap + window.scrollX;
4dfd09b	59	break;
4dfd09b	60	case "right":
4dfd09b	61	top = rect.top + rect.height / 2 + window.scrollY;
4dfd09b	62	left = rect.right + gap + window.scrollX;
4dfd09b	63	break;
4dfd09b	64	}
4dfd09b	65
4dfd09b	66	setPos({ top, left });
4dfd09b	67	setVisible(true);
4dfd09b	68	}, delay);
4dfd09b	69	}
4dfd09b	70
4dfd09b	71	function hide() {
4dfd09b	72	if (timerRef.current) clearTimeout(timerRef.current);
4dfd09b	73	setVisible(false);
4dfd09b	74	}
4dfd09b	75
4dfd09b	76	const transform = {
4dfd09b	77	top: "translate(-50%, -100%)",
4dfd09b	78	bottom: "translate(-50%, 0)",
4dfd09b	79	left: "translate(-100%, -50%)",
4dfd09b	80	right: "translate(0, -50%)",
4dfd09b	81	}[side];
4dfd09b	82
4dfd09b	83	if (!isValidElement(children)) return children;
4dfd09b	84
4dfd09b	85	return (
4dfd09b	86	<>
4dfd09b	87	{cloneElement(children as React.ReactElement<Record<string, unknown>>, {
4dfd09b	88	ref: triggerRef,
4dfd09b	89	onMouseEnter: show,
4dfd09b	90	onMouseLeave: hide,
4dfd09b	91	onFocus: show,
4dfd09b	92	onBlur: hide,
4dfd09b	93	})}
4dfd09b	94	{mounted &&
4dfd09b	95	visible &&
4dfd09b	96	createPortal(
4dfd09b	97	<div
4dfd09b	98	role="tooltip"
4dfd09b	99	className="text-xs px-2 py-1"
4dfd09b	100	style={{
4dfd09b	101	position: "absolute",
4dfd09b	102	top: pos.top,
4dfd09b	103	left: pos.left,
4dfd09b	104	transform,
4dfd09b	105	backgroundColor: "var(--bg-inset)",
4dfd09b	106	border: "1px solid var(--border)",
4dfd09b	107	color: "var(--text-secondary)",
4dfd09b	108	whiteSpace: "nowrap",
4dfd09b	109	zIndex: 9999,
4dfd09b	110	pointerEvents: "none",
4dfd09b	111	}}
4dfd09b	112	>
4dfd09b	113	{content}
4dfd09b	114	</div>,
4dfd09b	115	document.body
4dfd09b	116	)}
4dfd09b	117	</>
4dfd09b	118	);
4dfd09b	119	}