Initial commit - Rentall App

- Full-stack rental marketplace application
- React frontend with TypeScript
- Node.js/Express backend with JWT authentication
- Features: item listings, rental requests, calendar availability, user profiles

frontend/src/components/InfoTooltip.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+interface InfoTooltipProps {
+  text: string;
+}
+
+const InfoTooltip: React.FC<InfoTooltipProps> = ({ text }) => {
+  const [showTooltip, setShowTooltip] = useState(false);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        tooltipRef.current && 
+        !tooltipRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
+        setShowTooltip(false);
+      }
+    };
+
+    if (showTooltip) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showTooltip]);
+
+  return (
+    <span className="position-relative">
+      <span
+        ref={buttonRef}
+        className="text-muted ms-1"
+        style={{ cursor: 'pointer' }}
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          setShowTooltip(!showTooltip);
+        }}
+      >
+        <i className="bi bi-info-circle"></i>
+      </span>
+      {showTooltip && (
+        <div
+          ref={tooltipRef}
+          className="position-absolute bg-dark text-white p-2 rounded"
+          style={{
+            bottom: '100%',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            marginBottom: '5px',
+            whiteSpace: 'nowrap',
+            fontSize: '0.875rem',
+            zIndex: 1000,
+          }}
+        >
+          {text}
+          <div
+            className="position-absolute"
+            style={{
+              top: '100%',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              width: 0,
+              height: 0,
+              borderLeft: '5px solid transparent',
+              borderRight: '5px solid transparent',
+              borderTop: '5px solid var(--bs-dark)',
+            }}
+          />
+        </div>
+      )}
+    </span>
+  );
+};
+
+export default InfoTooltip;