create-template-html-css 2.0.4 → 2.2.0

package/templates-react/tooltip/Tooltip.jsx

@@ -0,0 +1,176 @@
+
+import './Tooltip.css';
+import { useState, useRef, useEffect } from 'react';
+
+function Tooltip({ 
+  children,
+  content,
+  position = 'top',
+  trigger = 'hover',
+  delay = 200,
+  arrow = true,
+  maxWidth = '200px',
+  disabled = false,
+  className = ''
+}) {
+  const [isVisible, setIsVisible] = useState(false);
+  const [tooltipPosition, setTooltipPosition] = useState({});
+  const triggerRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const timeoutRef = useRef(null);
+
+  const calculatePosition = () => {
+    if (!triggerRef.current || !tooltipRef.current) return;
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const gap = arrow ? 12 : 8;
+
+    let top, left;
+
+    switch (position) {
+      case 'top':
+        top = triggerRect.top - tooltipRect.height - gap;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case 'bottom':
+        top = triggerRect.bottom + gap;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+        break;
+      case 'left':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.left - tooltipRect.width - gap;
+        break;
+      case 'right':
+        top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+        left = triggerRect.right + gap;
+        break;
+      default:
+        top = triggerRect.top - tooltipRect.height - gap;
+        left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+    }
+
+    // Keep tooltip within viewport
+    const padding = 8;
+    if (left < padding) left = padding;
+    if (left + tooltipRect.width > window.innerWidth - padding) {
+      left = window.innerWidth - tooltipRect.width - padding;
+    }
+    if (top < padding) top = padding;
+    if (top + tooltipRect.height > window.innerHeight - padding) {
+      top = window.innerHeight - tooltipRect.height - padding;
+    }
+
+    setTooltipPosition({ top, left });
+  };
+
+  const showTooltip = () => {
+    if (disabled) return;
+    
+    if (delay > 0) {
+      timeoutRef.current = setTimeout(() => {
+        setIsVisible(true);
+      }, delay);
+    } else {
+      setIsVisible(true);
+    }
+  };
+
+  const hideTooltip = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+
+  const handleMouseEnter = () => {
+    if (trigger === 'hover' || trigger === 'both') {
+      showTooltip();
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (trigger === 'hover' || trigger === 'both') {
+      hideTooltip();
+    }
+  };
+
+  const handleClick = () => {
+    if (trigger === 'click' || trigger === 'both') {
+      if (isVisible) {
+        hideTooltip();
+      } else {
+        showTooltip();
+      }
+    }
+  };
+
+  const handleFocus = () => {
+    if (trigger === 'focus') {
+      showTooltip();
+    }
+  };
+
+  const handleBlur = () => {
+    if (trigger === 'focus') {
+      hideTooltip();
+    }
+  };
+
+  useEffect(() => {
+    if (isVisible) {
+      calculatePosition();
+      window.addEventListener('scroll', calculatePosition);
+      window.addEventListener('resize', calculatePosition);
+    }
+
+    return () => {
+      window.removeEventListener('scroll', calculatePosition);
+      window.removeEventListener('resize', calculatePosition);
+    };
+  }, [isVisible]);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  if (!content) return <>{children}</>;
+
+  return (
+    <>
+      <span
+        ref={triggerRef}
+        className={`tooltip-trigger ${className}`}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        onClick={handleClick}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        aria-describedby={isVisible ? 'tooltip' : undefined}
+      >
+        {children}
+      </span>
+
+      {isVisible && (
+        <div
+          ref={tooltipRef}
+          id="tooltip"
+          className={`tooltip tooltip-${position} ${arrow ? 'tooltip-arrow' : ''}`}
+          style={{
+            ...tooltipPosition,
+            maxWidth
+          }}
+          role="tooltip"
+        >
+          {content}
+        </div>
+      )}
+    </>
+  );
+}
+
+export default Tooltip;