분류 Reactjs

Tippy.js의 공식 React 컴포넌트

컨텐츠 정보

  • 조회 388 (작성일 )

본문

Tippy.js는 Popper.js가 제공하는 고도로 사용자 정의 가능한 툴팁 및 팝 오버 라이브러리입니다. 

이것은 가벼운 래퍼로 React에서 선언적으로 사용할 수 있습니다.


https://github.com/atomiks/tippy.js-react


? 예 


툴팁 


팝 오버 


Accessible Emoji Reaction Picker 


? 설치 


# npm
npm i @tippy.js/react

# Yarn
yarn add @tippy.js/react


CDN: https://unpkg.com/@tippy.js/react 


Requires React 16.8+ 


?사용법 


Tippy 구성 요소와 핵심 CSS를 가져옵니다. <Tippy /> 컴포넌트를 요소 주위에 감싸서 툴팁의 컨텐츠를 컨텐츠 소품으로 제공하십시오. 문자열 또는 React 요소 트리를 사용할 수 있습니다.


import React from 'react';
import Tippy from '@tippy.js/react';
import 'tippy.js/dist/tippy.css';

const StringContent = () => (
  <Tippy content="Hello">
    <button>My button</button>
  </Tippy>
);

const JSXContent = () => (
  <Tippy content={<span>Tooltip</span>}>
    <button>My button</button>
  </Tippy>
);









Tippy.js