create-template-html-css 2.1.0 → 2.2.0

package/templates-react/tooltip/Tooltip.css

@@ -0,0 +1,165 @@
+.tooltip-trigger {
+  display: inline-flex;
+  position: relative;
+  cursor: help;
+}
+
+.tooltip {
+  position: fixed;
+  z-index: 9999;
+  padding: 0.5rem 0.75rem;
+  background-color: #1f2937;
+  color: white;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  pointer-events: none;
+  animation: tooltipFadeIn 0.15s ease-out;
+  word-wrap: break-word;
+}
+
+@keyframes tooltipFadeIn {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+/* Arrow Styles */
+.tooltip-arrow::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+.tooltip-top.tooltip-arrow::before {
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 6px 6px 0 6px;
+  border-color: #1f2937 transparent transparent transparent;
+}
+
+.tooltip-bottom.tooltip-arrow::before {
+  top: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent #1f2937 transparent;
+}
+
+.tooltip-left.tooltip-arrow::before {
+  right: -6px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 6px 0 6px 6px;
+  border-color: transparent transparent transparent #1f2937;
+}
+
+.tooltip-right.tooltip-arrow::before {
+  left: -6px;
+  top: 50%;
+  transform: translateY(-50%);
+  border-width: 6px 6px 6px 0;
+  border-color: transparent #1f2937 transparent transparent;
+}
+
+/* Position Animations */
+.tooltip-top {
+  animation: tooltipSlideDown 0.2s ease-out;
+}
+
+.tooltip-bottom {
+  animation: tooltipSlideUp 0.2s ease-out;
+}
+
+.tooltip-left {
+  animation: tooltipSlideRight 0.2s ease-out;
+}
+
+.tooltip-right {
+  animation: tooltipSlideLeft 0.2s ease-out;
+}
+
+@keyframes tooltipSlideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes tooltipSlideUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes tooltipSlideRight {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes tooltipSlideLeft {
+  from {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+/* Dark Mode Support (inverted for visibility) */
+@media (prefers-color-scheme: dark) {
+  .tooltip {
+    background-color: #f3f4f6;
+    color: #111827;
+  }
+
+  .tooltip-top.tooltip-arrow::before {
+    border-color: #f3f4f6 transparent transparent transparent;
+  }
+
+  .tooltip-bottom.tooltip-arrow::before {
+    border-color: transparent transparent #f3f4f6 transparent;
+  }
+
+  .tooltip-left.tooltip-arrow::before {
+    border-color: transparent transparent transparent #f3f4f6;
+  }
+
+  .tooltip-right.tooltip-arrow::before {
+    border-color: transparent #f3f4f6 transparent transparent;
+  }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .tooltip {
+    max-width: calc(100vw - 2rem) !important;
+    font-size: 0.8125rem;
+  }
+}

package/templates-react/tooltip/Tooltip.example.jsx

@@ -0,0 +1,166 @@
+
+import Tooltip from './Tooltip';
+
+function TooltipExample() {
+  return (
+    <div style={{ padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
+      <h1>Tooltip Component Examples</h1>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Basic Tooltips</h2>
+        <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap' }}>
+          <Tooltip content="This is a tooltip!">
+            <button style={buttonStyle}>Hover me</button>
+          </Tooltip>
+          
+          <Tooltip content="This tooltip has a longer text to demonstrate how it handles multiple lines of content.">
+            <button style={buttonStyle}>Long content</button>
+          </Tooltip>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Positions</h2>
+        <div style={{ 
+          display: 'grid', 
+          gridTemplateColumns: 'repeat(2, 1fr)', 
+          gap: '2rem',
+          placeItems: 'center',
+          minHeight: '200px'
+        }}>
+          <Tooltip content="Tooltip on top" position="top">
+            <button style={buttonStyle}>Top</button>
+          </Tooltip>
+          
+          <Tooltip content="Tooltip on bottom" position="bottom">
+            <button style={buttonStyle}>Bottom</button>
+          </Tooltip>
+          
+          <Tooltip content="Tooltip on left" position="left">
+            <button style={buttonStyle}>Left</button>
+          </Tooltip>
+          
+          <Tooltip content="Tooltip on right" position="right">
+            <button style={buttonStyle}>Right</button>
+          </Tooltip>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Different Triggers</h2>
+        <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap' }}>
+          <Tooltip content="Appears on hover (default)" trigger="hover">
+            <button style={buttonStyle}>Hover trigger</button>
+          </Tooltip>
+          
+          <Tooltip content="Appears on click" trigger="click">
+            <button style={buttonStyle}>Click trigger</button>
+          </Tooltip>
+          
+          <Tooltip content="Appears on focus" trigger="focus">
+            <button style={buttonStyle}>Focus trigger</button>
+          </Tooltip>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Without Arrow</h2>
+        <Tooltip content="Tooltip without arrow" arrow={false}>
+          <button style={buttonStyle}>No arrow</button>
+        </Tooltip>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Custom Delay</h2>
+        <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap' }}>
+          <Tooltip content="No delay" delay={0}>
+            <button style={buttonStyle}>No delay</button>
+          </Tooltip>
+          
+          <Tooltip content="500ms delay" delay={500}>
+            <button style={buttonStyle}>Slow (500ms)</button>
+          </Tooltip>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Custom Width</h2>
+        <Tooltip 
+          content="This is a very long tooltip content that demonstrates the custom maxWidth property. You can control how wide the tooltip should be." 
+          maxWidth="300px"
+        >
+          <button style={buttonStyle}>Wide tooltip</button>
+        </Tooltip>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Disabled Tooltip</h2>
+        <Tooltip content="You won't see me!" disabled>
+          <button style={buttonStyle}>Disabled tooltip</button>
+        </Tooltip>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>On Different Elements</h2>
+        <div style={{ display: 'flex', gap: '2rem', flexWrap: 'wrap', alignItems: 'center' }}>
+          <Tooltip content="Tooltip on text">
+            <span style={{ color: '#3b82f6', textDecoration: 'underline dotted' }}>
+              Hover this text
+            </span>
+          </Tooltip>
+          
+          <Tooltip content="Helpful information about this icon">
+            <span style={{ fontSize: '2rem', cursor: 'help' }}>ℹ️</span>
+          </Tooltip>
+          
+          <Tooltip content="This badge has a tooltip">
+            <span style={{
+              backgroundColor: '#ef4444',
+              color: 'white',
+              padding: '0.25rem 0.5rem',
+              borderRadius: '0.25rem',
+              fontSize: '0.875rem'
+            }}>
+              NEW
+            </span>
+          </Tooltip>
+        </div>
+      </section>
+
+      <section style={{ marginBottom: '3rem' }}>
+        <h2>Interactive Example</h2>
+        <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
+          <span>Username:</span>
+          <input 
+            type="text" 
+            style={{ 
+              padding: '0.5rem', 
+              border: '1px solid #d1d5db', 
+              borderRadius: '0.375rem' 
+            }} 
+          />
+          <Tooltip 
+            content="Username must be 3-20 characters long and contain only letters, numbers, and underscores."
+            position="right"
+            maxWidth="250px"
+          >
+            <span style={{ fontSize: '1.25rem', cursor: 'help', color: '#6b7280' }}>❓</span>
+          </Tooltip>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+const buttonStyle = {
+  padding: '0.5rem 1rem',
+  backgroundColor: '#3b82f6',
+  color: 'white',
+  border: 'none',
+  borderRadius: '0.375rem',
+  cursor: 'pointer',
+  fontSize: '0.875rem',
+  fontWeight: '500'
+};
+
+export default TooltipExample;

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;