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

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

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

? 예 

툴팁 

• Bootstrap 4 Style
• Material Style

팝 오버 

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>
);