React에서 Tooltip 컴포넌트 만들기

 

React를 사용한 UI 개발에서 사용자 경험을 향상시키는 요소 중 하나는 Tooltip입니다. Tooltip은 마우스 오버 시 간단한 정보나 설명을 제공하는 UI 요소로, 사용자 인터페이스를 직관적으로 만들어줍니다. 이번 글에서는 React에서 Tooltip 컴포넌트를 만드는 방법을 상세히 설명하고, 다양한 구현 사례를 다룹니다.

---

1. Tooltip 컴포넌트란?

Tooltip은 작은 팝업 형태로, 사용자가 특정 요소에 마우스를 올리거나 포커스를 맞췄을 때 추가 정보를 제공합니다. Tooltip은 다음과 같은 상황에서 유용하게 사용됩니다:

• 버튼이나 아이콘의 기능을 설명할 때
• 긴 텍스트를 축약 표시하고, 전체 내용을 제공할 때
• UI 요소에 대한 간단한 힌트를 제공할 때

---

2. Tooltip 컴포넌트의 기본 구현

React에서 Tooltip 컴포넌트를 구현하려면, hover 이벤트 처리, 동적 스타일링, 그리고 Portal을 활용한 위치 설정을 고려해야 합니다.

2-1. 간단한 Tooltip 컴포넌트

아래는 기본적인 Tooltip 컴포넌트를 구현한 코드입니다.

import React, { useState } from 'react';
import './Tooltip.css'; // 스타일링 파일

function Tooltip({ children, content }) {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div
      className="tooltip-wrapper"
      onMouseEnter={() => setIsVisible(true)}
      onMouseLeave={() => setIsVisible(false)}
    >
      {children}
      {isVisible && <div className="tooltip-content">{content}</div>}
    </div>
  );
}

export default Tooltip;

2-2. 스타일링 예제 (CSS)

Tooltip.css 파일의 내용은 아래와 같습니다:

.tooltip-wrapper {
  display: inline-block;
  position: relative;
}

.tooltip-content {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  z-index: 100;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

위 코드는 간단한 Tooltip 컴포넌트를 생성하며, isVisible 상태를 통해 Tooltip의 표시 여부를 관리합니다.

---

3. Tooltip 컴포넌트 확장: 동적 위치 설정

Tooltip의 위치를 동적으로 설정해 사용자 경험을 개선할 수 있습니다. Tooltip의 위치를 top, bottom, left, right와 같은 속성으로 제어하도록 확장해 보겠습니다.

3-1. 동적 위치 설정이 가능한 Tooltip

import React, { useState } from 'react';
import './Tooltip.css';

function Tooltip({ children, content, position = 'top' }) {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div
      className="tooltip-wrapper"
      onMouseEnter={() => setIsVisible(true)}
      onMouseLeave={() => setIsVisible(false)}
    >
      {children}
      {isVisible && (
        <div className={`tooltip-content tooltip-${position}`}>
          {content}
        </div>
      )}
    </div>
  );
}

export default Tooltip;

3-2. 스타일링 확장

.tooltip-content {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 14px;
  z-index: 100;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  visibility: visible;
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}

.tooltip-top {
  top: -10px;
  left: 50%;
  transform: translate(-50%, -100%);
}

.tooltip-bottom {
  top: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

.tooltip-left {
  top: 50%;
  left: -10px;
  transform: translate(-100%, -50%);
}

.tooltip-right {
  top: 50%;
  left: 100%;
  transform: translate(0, -50%);
}

---

4. Portal을 사용한 Tooltip 구현

Portal을 활용하면 Tooltip이 부모 컴포넌트의 제약에서 벗어나 화면 어디에든 렌더링될 수 있습니다.

4-1. Portal을 활용한 Tooltip 구현

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import './Tooltip.css';

function Tooltip({ children, content }) {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div
      className="tooltip-wrapper"
      onMouseEnter={() => setIsVisible(true)}
      onMouseLeave={() => setIsVisible(false)}
    >
      {children}
      {isVisible &&
        ReactDOM.createPortal(
          <div className="tooltip-content">{content}</div>,
          document.body
        )}
    </div>
  );
}

export default Tooltip;

Portal을 사용하면 Tooltip이 부모의 overflow 제한에 영향을 받지 않으므로, 더 유연한 UI를 만들 수 있습니다.

---

5. Tooltip 컴포넌트 적용 예제

아래는 Tooltip 컴포넌트를 적용한 사용 예제입니다.

import React from 'react';
import Tooltip from './Tooltip';

function App() {
  return (
    <div style={{ padding: '50px' }}>
      <Tooltip content="This is a tooltip!" position="top">
        <button>Hover me</button>
      </Tooltip>
    </div>
  );
}

export default App;

---

6. 결론

React에서 Tooltip 컴포넌트를 만드는 과정은 기본 구현부터 Portal을 활용한 고급 구현까지 다양하게 확장할 수 있습니다. Tooltip은 사용자 경험을 향상시키는 데 중요한 역할을 하므로, 프로젝트의 요구사항에 맞게 적절히 커스터마이징해 보세요.

이제 React 프로젝트에서 직관적이고 유용한 Tooltip을 만들어 보세요! 🎉