1. Tooltip

Tooltip 컴포넌트는 사용자가 마우스를 요소 위에 올렸을 때 추가적인 정보를 제공하는 UI 요소입니다. 위치, 내용, 스타일을 손쉽게 커스터마이징할 수 있습니다.

1.1. Import

import Tooltip from '@components/Tooltip/Tooltip';

1.2. Usage

기본 사용 예제는 아래와 같습니다:


import Tooltip from '@components/Tooltip/Tooltip';
import { FaGithub } from 'react-icons/fa';

function Example() {
  return (
    <Tooltip content="GitHub">
      <FaGithub />
    </Tooltip>
  );
}

export default Example;

1.3. Tooltip Positions

Tooltip 컴포넌트는 툴팁의 위치를 설정할 수 있는 다양한 옵션을 제공합니다:

Top: 요소의 위쪽에 툴팁을 표시합니다.
Bottom: 요소의 아래쪽에 툴팁을 표시합니다.
Left: 요소의 왼쪽에 툴팁을 표시합니다.
Right: 요소의 오른쪽에 툴팁을 표시합니다.

Hover me (Top)

Hover me (Bottom)

Hover me (Left)

Hover me (Right)


import Tooltip from '@components/Tooltip/Tooltip';

function Example() {
  return (
    <>
      <Tooltip content="Top Tooltip" position="top">
        <span>Hover me (Top)</span>
      </Tooltip>
      <Tooltip content="Bottom Tooltip" position="bottom">
        <span>Hover me (Bottom)</span>
      </Tooltip>
      <Tooltip content="Left Tooltip" position="left">
        <span>Hover me (Left)</span>
      </Tooltip>
      <Tooltip content="Right Tooltip" position="right">
        <span>Hover me (Right)</span>
      </Tooltip>
    </>
  );
}

export default Example;

2. TooltipIcon

TooltipIcon 컴포넌트는 아이콘과 함께 툴팁을 표시하는 컴포넌트입니다. 마우스를 아이콘 위에 올리면 아이콘에 대한 추가 정보를 제공합니다.

2.1. Import

import TooltipIcon from '@components/Tooltip/TooltipIcon';

2.2. Usage

아이콘 툴팁의 사용 예제는 아래와 같습니다:


import Tooltip from '@components/Tooltip/Tooltip';
import { FaGithub, FaFacebookSquare, FaInstagramSquare, FaLine } from 'react-icons/fa';
import { FaSquareXTwitter } from 'react-icons/fa6';

function Example() {
  return (
    <div className="flex">
      <Tooltip content={<FaGithub />}>
        <FaGithub className="mr-2 text-2xl dark:text-white"/>
      </Tooltip>
      <Tooltip content={<FaFacebookSquare />}>
        <FaFacebookSquare className="mr-2 text-2xl dark:text-white"/>
      </Tooltip>
      <Tooltip content={<FaInstagramSquare />}>
        <FaInstagramSquare className="mr-2 text-2xl dark:text-white"/>
      </Tooltip>
      <Tooltip content={<FaLine />}>
        <FaLine className="mr-2 text-2xl dark:text-white"/>
      </Tooltip>
      <Tooltip content={<FaSquareXTwitter />}>
        <FaSquareXTwitter className="mr-2 text-2xl dark:text-white"/>
      </Tooltip>
    </div>
  );
}

export default Example;

2.3. Full Example


// TooltipIcon.tsx
import React from 'react';
import Tooltip from './Tooltip';
import { FaGithub, FaFacebookSquare, FaInstagramSquare, FaLine } from 'react-icons/fa';
import { FaSquareXTwitter } from 'react-icons/fa6';

const TooltipIcon = () => {
  return (
    <div className="flex">
      <Tooltip content={<FaGithub />}>
        <FaGithub className="mr-2 text-2xl dark:text-white" />
      </Tooltip>
      <Tooltip content={<FaFacebookSquare />}>
        <FaFacebookSquare className="mr-2 text-2xl dark:text-white" />
      </Tooltip>
      <Tooltip content={<FaInstagramSquare />}>
        <FaInstagramSquare className="mr-2 text-2xl dark:text-white" />
      </Tooltip>
      <Tooltip content={<FaLine />}>
        <FaLine className="mr-2 text-2xl dark:text-white" />
      </Tooltip>
      <Tooltip content={<FaSquareXTwitter />}>
        <FaSquareXTwitter className="mr-2 text-2xl dark:text-white" />
      </Tooltip>
    </div>
  );
};

export default TooltipIcon;