client/src/components/Tooltip.tsx - develop - kan64/spreadsheet-lab

client/src/components/Tooltip.tsx

67 строк2 KB

Anton Kravchenkov

feat: add multiple sheets per table

03 мар 2026, 12:25

03 мар 2026, 12:255b25525

import React, { useState, useRef, useCallback, useEffect } from 'react';
import { createPortal } from 'react-dom';

interface TooltipProps {
  text: string;
  delay?: number;
  children: React.ReactElement;
}

export const Tooltip: React.FC<TooltipProps> = ({ text, delay = 400, children }) => {
  const [visible, setVisible] = useState(false);
  const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
  const triggerRef = useRef<HTMLElement | null>(null);
  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined);

  const show = useCallback(() => {
    timeoutRef.current = setTimeout(() => {
      if (!triggerRef.current) return;
      const rect = triggerRef.current.getBoundingClientRect();
      setPos({
        top: rect.top - 4,
        left: rect.left + rect.width / 2,
      });
      setVisible(true);
    }, delay);
  }, [delay]);

  const hide = useCallback(() => {
    clearTimeout(timeoutRef.current);
    setVisible(false);
  }, []);

  useEffect(() => () => clearTimeout(timeoutRef.current), []);

  if (!text) return children;

  const child = React.Children.only(children);

  const cloned = React.cloneElement(child, {
    ref: (el: HTMLElement | null) => {
      triggerRef.current = el;
      const originalRef = (child as any).ref;
      if (typeof originalRef === 'function') originalRef(el);
      else if (originalRef && typeof originalRef === 'object') (originalRef as React.MutableRefObject<HTMLElement | null>).current = el;
    },
    onMouseEnter: (e: React.MouseEvent) => {
      show();
      child.props.onMouseEnter?.(e);
    },
    onMouseLeave: (e: React.MouseEvent) => {
      hide();
      child.props.onMouseLeave?.(e);
    },
  } as any);

  return (
    <>
      {cloned}
      {visible && pos && createPortal(
        <div className="tooltip" style={{ top: pos.top, left: pos.left }}>
          {text}
        </div>,
        document.body,
      )}
    </>
  );
};