rentall-app/frontend/src/components/InfoTooltip.tsx

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;