ToolTip이란?

해당 요소에 마우스를 올리면 추가적인 정보가 나타나게 하는 효과

ToolTip사용하기

Installation

npm install react-tooltip

사용하기

import { Tooltip} from 'react-tooltip';

<button className='icon-container'>
        <FaVideo size={25} data-tooltip-content='Video' data-tooltip-id='tooltip' />
      </button>


<Tooltip
      id='tooltip'
      backgroundColor='gray'
      place="top"
      arrowColor='transparent'
      />

• tooltip을 import해준 후, tooltip태그를 만든다.
• tooltip태그에 id값을 넣어준다.
  (id값과 data-tooltip-id값이 같아야 한다)
• 그 외의 style도 지정해준다
• tooltip하고자 하는 icon에
  data-tooltip-content : 추가적인 정보내용
  data-tooltip-id : tooltip의 id값
  을 넣어준다.

홈페이지를 만들때 tooltip의 사용은 유용하기 때문에 여러번 연습을 통해 익숙해져야겠다

React-tooltip 설명 더보기