[React] tooltip 구현하기

이렇게 마우스를 올려다 댔을 때 이게 어떤 버튼인지 미리 알 수 있는 문구가 나오게 하려면

tooltip 이라는 기능을 구현하면 된다.

 

React에서 tooltip 을 구현하려면 여러 라이브러리를 활용해서 구현할 수 있는데

나는 그중에서도 react-tooltip 이라는 라이브러리를 사용해보려고 한다.

 

https://react-tooltip.com/docs/getting-started

Getting Started | React Tooltip

자세한 설명은 위에 나와있다.

본인도 공식문서를 보고 적용했기 때문에 빠르고 적용법만 보고싶은 분은 아래를 참고하시면 될 것 같다.

 

---

사용법

사용법은 간단하다.

먼저 라이브러리를 설치한다.

npm install react-tooltip

상단에 필요한 것들을 import 해온다.

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

tooltip 을 적용하고 싶은 곳에 a 태그를 작성하고 감싼다.

 <a
 	data-tooltip-id="chat-record"
	data-tooltip-content="이전 채팅 보기"
	data-tooltip-place="top"
>
    <div>
        <button onClick={handleShowRecordPage}>
            <img
                src="chat_icon.png"
                className="w-7 h-7"
            />
        </button>
    </div>
</a>
<Tooltip id="chat-record" />

id 랑 content 는 포함되어야한다.

place 로 위치를 지정해줄 수 있다.

 

결과

위는 적용된 모습이다!

 

사용법이 간단해서 편리한 것 같다.