React-tooltip

react-tooltip

기존 프로젝트처럼 bootstrap tooltip을 사용하려고했는데, tailwind와 bootstrap은 유틸리티 클래스가 겹쳐 같이 사용하면 안된다고 한다. 

그래서 bootstrap 패키지는 삭제, react-tooltip을 설치했다. 사용방법은 bootstrap과 비슷하다.

 

1. 설치

npm install react-tooltip

 

2.

'use client'

import { Tooltip } from "react-tooltip";

export default function HelpTooltip() {
  return (
    <div>
      <p
        className="text-white mt-2"
        data-tooltip-id="help-tooltip"
        data-tooltip-content="Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Phasellus vel accumsan ipsum, ut imperdiet ante."
        data-tooltip-place="bottom"
      >
        <i className="bi bi-question-circle-fill mr-2"></i>
        Do you need help?
      </p>
      <Tooltip id="help-tooltip" />
    </div>
  );
}

 

툴팁은 클라이언트 컴포넌트에서만 사용할 수 있다.

툴팁을 사용할 곳에 data-tooltip-id, data-tooltip-content, data-tooltip-place(default top) 옵션을 넣어주고, import 해온 Tooltip을 추가해준다.

Tooltip에는 data-tooltip-id와 같은 이름으로 id를 명시해준다.