React에서 툴팁 만들기

툴팁은 주로 데이터(텍스트, 이미지 또는 비디오)에 대한 추가 정보를 정의하는 데 사용됩니다. 도구 설명은 사용자가 마우스 포인터를 움직이거나 요소를 탭할 때 표시됩니다. 도구 설명은 위쪽, 오른쪽, 아래쪽, 왼쪽에 배치할 수 있습니다. 여기에서는 패키지React tooltip-lite를 사용하여 반응 애플리케이션에서 툴팁을 생성합니다. 가볍고 반응이 빠른 툴팁 패키지입니다read in detail here.

React에서 툴팁 만들기



NPM으로 설치




npm install react-tooltip-lite


반응 구성 요소로 가져오기



이제 구성 요소를 클래스 또는 기능적 구성 요소로 가져와서 사용할 수 있습니다.

import Tooltip from 'react-tooltip-lite';

<Tooltip 
content="React Tooltip" 
direction="right"
tagName="span"
className="target"
>
    <a href="http://readymadecode.com">Visit Tutorials</a>
</Tooltip>


이 반응 도구 설명 구성 요소에 사용할 수 있는 많은 소품이 있습니다see here.

React의 스타일 React 툴팁



일부 CSS를 적용하여 툴팁에 반응할 수 있습니다. 아래는 예시입니다.

.react-tooltip-lite {
  background: #000000;
  color: white;
}

.react-tooltip-lite-arrow {
  border-color: #333;
}



구독 좋아요 공유와 긍정적인 피드백을 해주세요.

더 많은 자습서를 보려면 visit my website .

감사:)
행복한 코딩 :)

좋은 웹페이지 즐겨찾기