본 컴포넌트는 사용자의 호버(Hover)나 포커스(Focus) 이벤트에 대응하여 부가적인 정보를 제공하는 Tooltip입니다. 앞선 컴포넌트들과 마찬가지로 하이브리드 인터랙션과 시각적 피드백을 직관적으로 제공하도록 설계되었습니다.

📂 Tooltip

특정 요소에 대한 추가 설명이나 힌트를 작은 팝업 형태로 보여주는 가이드 컴포넌트입니다.

✅ 설계 포인트

• 이중 트리거 지원: onMouseEnter/Leave를 통한 마우스 호버 대응은 물론, onFocus/Blur를 통해 키보드 사용자를 위한 웹 접근성(A11y)을 보장합니다.
• 유연한 상태 관리: alwaysOpen 프롭을 통해 특정 상황(예: 신규 기능 가이드)에서 툴팁을 상시 노출할 수 있는 모드를 지원합니다.
• CSS 기반 화살표 구현: 별도의 이미지 자산 없이 border 속성을 활용한 순수 CSS로 말풍선 꼬리표를 구현하여 렌더링 효율을 높였습니다.
• 레이아웃 자동 정렬: 상단에 툴팁이 나타나며 left-1/2 -translate-x-1/2 조합을 통해 하위 요소의 중앙에 정확히 배치됩니다.

✅ TooltipProps (공통 속성)

모든 표준 HTML 속성을 지원하며, 아래의 커스텀 속성을 추가로 가집니다.

• content: React.ReactNode - (필수) 툴팁 내부에 표시될 텍스트나 레이아웃입니다.
• children: React.ReactNode - (필수) 툴팁을 트리거할 대상 요소입니다. (예: 버튼, 아이콘 등)
• className?: string - 툴팁 컨테이너의 위치나 스타일을 보정하기 위한 Tailwind 클래스입니다.
• alwaysOpen?: boolean (기본값: false) - true 설정 시 호버 여부와 상관없이 툴팁이 상시 노출됩니다

✅ 사용 예시

1. 일반적인 사용 (정보 힌트)

아이콘이나 버튼 위에 부가 설명을 노출할 때 사용합니다.

import Tooltip from "@/shared/ui/tooltip";
import { HelpCircle } from "lucide-react";

export default function InfoSection() {
  return (
    <div className="flex items-center gap-2">
      <span>배송비 안내</span>
      <Tooltip content="도서산간 지역은 추가 비용이 발생할 수 있습니다.">
        <HelpCircle size={16} className="text-gray-400 cursor-help" />
      </Tooltip>
    </div>
  );
}

2. 가이드 모드 (alwaysOpen)