우선, 툴팁 라이브러리 중 하나를 선택해야 합니다. popular한 옵션 중 하나인 ‘tippy.js’를 사용하는 예제를 보여드리겠습니다.

먼저 tippy.js를 설치해야 합니다. 터미널을 열고 다음 명령어를 실행하세요:

npm install tippy.js

그런 다음, JavaScript 파일에서 다음 코드로 tippy.js를 import하세요:

import tippy from 'tippy.js';

tippy('[data-tooltip]', {
  placement: 'bottom', // 툴팁을 어느 위치에 표시할지 설정할 수 있습니다
  arrow: true, // 화살표 표시 여부
  content: 'Hello, World!', // 툴팁 내용
});

위 코드의 '[data-tooltip]'는 툴팁을 적용할 요소를 선택하기 위한 셀렉터입니다. 여기서 [data-tooltip]은 data-tooltip 속성이 있는 요소를 의미합니다. 이 셀렉터를 프로젝트 요구에 맞게 수정할 수 있습니다.

마지막으로, Parcel 번들러를 실행하세요. 터미널에서 다음 명령어를 입력하세요:

npx parcel index.html

위 명령어에서 index.html은 웹 애플리케이션의 진입점 파일을 의미합니다. 여기서는 필요에 따라 해당 파일을 수정해야 할 수도 있습니다.

이제 툴팁 라이브러리가 적용된 웹 애플리케이션을 확인할 수 있습니다. 해당 요소에 마우스를 올려놓으면 툴팁이 나타날 것입니다.

이 예제는 Parcel에서 tippy.js를 사용하는 방법을 보여주기 위한 것이며, 다른 툴팁 라이브러리를 사용할 경우 관련된 라이브러리(import) 및 설정 코드를 변경해야 할 수 있습니다.

더 자세한 정보와 옵션은 tippy.js 공식 문서를 참조해주세요.