React ) Tooltip 라이브러리 react-tooltip

디자인이 나오지 않은 상태에서 개발을 진행중이라…(ㅎㅎ…) 툴팁은 라이브러리로 구현해놓기로 했습니다.

라이브러리는 가장 사용법이 간단하고 쉬운 react-tooltip 라이브러리 선택!

1. 라이브러리 설치

npm i react-tooltip

2. ReactTooltip 컴포넌트 적용

  <span data-tip data-for="tooltip"> HERE </span>
  <ReactTooltip
    id="tooltip"
    effect="solid"
    place="bottom"
    type="dark"
  >
   {tooltip && tooltip}
 </ReactTooltip>

hover 효과를 더할 요소에 ReactTooltip에 전달한 id와 똑같은 값을 data-for에 설정하면 됩니다.

그리고 children으로 tooltip에 띄울 내용 혹은 컴포넌트를 전달하면 끝입니다.

effect, place, type은 부가적인 요소로 설정하지 않을 경우 default 값이 적용됩니다.

https://wwayne.github.io/react-tooltip/ 해당 사이트에서 더 많은 정보를 얻을 수 있습니다.