[LIB] ReactTooltip → v5 변경점

 

 

react-tooltip 라이브러리가 v5 버전부터 완전히 새롭게 리팩토링되면서,

기존의 <ReactTooltip /> 사용 방식이 완전히 사라지고, <Tooltip /> 컴포넌트 중심으로 API가 변경되었습니다.

 

Tooltip을 원래 쓰던 방식대로 사용이 하려다가 문제가 생겨 찾아보니 v5에 큰 변경점이 있었네요;;

 

 

📌 ReactTooltip → Tooltip: 버전 4 vs 5 비교

	v4	v5
사용 방식	<ReactTooltip /> 사용	<Tooltip /> 컴포넌트 사용
트리거 방식	data-tip 속성	data-tooltip-id + data-tooltip-content
스타일 import	자동 or 선택적	import 'react-tooltip/dist/react-tooltip.css' 필수
위치 설정	place="top" 등	동일 (place="top", "bottom", "right", "left")
여러 툴팁 지원	id로 구분	id로 구분 (강화됨)
자동 위치 조정	기본 내장	autoPlace, autoAdjust 등 세분화 옵션 제공
리빌드 필요 여부	종종 ReactTooltip.rebuild() 호출	필요 없음 (자동 반영됨)
커스터마이징	className 기반	style, variant, opacity, delay*, float, anchorId 등 다양한 prop 지원

 

👉 v5 기본 사용 예제

import { Tooltip } from 'react-tooltip';
import 'react-tooltip/dist/react-tooltip.css';

<a
  data-tooltip-id="my-tooltip"
  data-tooltip-content="툴팁 내용"
>
  Hover me
</a>

<Tooltip id="my-tooltip" place="top" />

 

 

✅ 주요 변경사항

1. ❌ data-tip → ✅ data-tooltip-content

v4

<a data-tip="Hello!">Hover me</a> <ReactTooltip />

v5

<a data-tooltip-id="tip1" data-tooltip-content="Hello!">Hover me</a> <Tooltip id="tip1" />

 

---

2. ❌ <ReactTooltip /> → ✅ <Tooltip />

모듈 이름과 default export 방식이 바뀌었으며, TypeScript에서도 ReactTooltip 사용 X

---

3. ✅ 스타일 명확히 분리됨

import 'react-tooltip/dist/react-tooltip.css';

🔥 css 파일을 명시적으로 import해야 툴팁이 보입니다!

 

 

 

[공식문서]

https://react-tooltip.com/

Welcome | React Tooltip