[React][유용한 툴] react-tooltip으로 툴팁추가하기

# react-tooltip 사용방법

- Tooltip은 UI를 간소화 하면서도 필요한 정보를 전달하기 위해 자주 사용되는 방법 중 하나입니다. 그렇기에 다양한 UI Framework에서 Tooltip은 기본적으로 지원하는 컴포넌트 중 하나입니다. 그러나 이러한 통합 프레임워크는 필연적으로 무겁거나 용량이 큰 경우가 많다보니, 실제 적용할 때 퍼포먼스에 대한 고민이 생기는 경우가 있습니다. 본 포스팅에서는 이런 경우 도움이 될 수 있는 react-tooltip에 대한 사용법을 소개하려고 합니다.

 

# Github Page

https://github.com/ReactTooltip/react-tooltip

GitHub - ReactTooltip/react-tooltip: React Tooltip Component

 

# Document Page

https://react-tooltip.com/

Welcome | React Tooltip

 

# 사용법

- 라이브러리를 설치합니다

$ yarn add react-tooltip

- 그리고 아래와 같이 react-tooltip.css를 import 해주어야 합니다. 그리고 Tooltip도 import 합니다.

import 'react-tooltip/dist/react-tooltip.css' //반드시 필요
import { Tooltip } from 'react-tooltip'

- 그리고 Tooltip을 보여주어야할 Element에 tooltip-data-id를 정의하고, Tooltip 컴포넌트에 동일한 아이디를 넘겨주어야 합니다. 복수의 Element에 동일한 Tooltip 컴포넌트를 사용하려면, 아래와 같이 구현하실 수 있습니다.

<div>
  <div tooltip-data-id="tooltip-id" tooltip-data-content="Tooltip 내용1">
    Tooltip Element
  </div>
  <div tooltip-data-id="tooltip-id" tooltip-data-content="Tooltip 내용2">
    Tooltip Element2
  </div>
  <Tooltip
    id="tooltip-id"
    place="bottom"
  />
</div>

- 그리고 툴팁이 보여지는 시간을 컨트롤하고 싶다면, data-tooltip-delay-hide, data-tooltip-delay-show를 툴팁에 표시될 내용을 넘기는 것과 동일하게 넘겨주시면 됩니다.

 

---