Intro.js는 사용자에게 웹 페이지나 앱의 기능을 소개하는 데 사용되는 툴팁 및 가이드 라이브러리입니다. Intro.js의 API를 사용하여 툴팁을 제어하고 다양한 이벤트에 대한 콜백 함수를 정의할 수 있습니다.

Intro.js API

Intro.js의 API를 사용하여 툴팁을 표시하거나 감추는 등의 작업을 수행할 수 있습니다. 몇 가지 주요 API 메서드는 다음과 같습니다.

setOptions(options)

이 메서드를 사용하여 Intro.js의 옵션을 설정할 수 있습니다. 예를 들어, 옵션 객체를 전달하여 툴팁의 스타일, 위치, 스텝 등을 설정할 수 있습니다.

예제:

introJs().setOptions({ 
  steps: [ /* 툴팁 스텝들 */ ],
  showStepNumbers: false
}).start();

start()

이 메서드를 호출하여 Intro.js를 시작할 수 있습니다. Intro.js는 설정된 옵션에 따라 툴팁을 표시하며, 사용자에게 웹 페이지나 앱의 기능을 가이드합니다.

exit()

현재 진행 중인 Intro.js를 종료합니다.

goToStep(step)

지정된 순서의 툴팁으로 이동합니다.

이벤트 콜백 함수

Intro.js에서는 다양한 이벤트에 대한 콜백 함수를 등록하여 사용자 지정 작업을 수행할 수 있습니다. 몇 가지 주요 이벤트와 해당 콜백 함수는 다음과 같습니다.

onbeforechange (element)

해당 단계의 툴팁이 표시되기 전에 호출되는 이벤트입니다. 인자로 현재 툴팁이 표시될 요소가 전달됩니다.

onchange (element)

해당 단계의 툴팁이 표시된 후에 호출되는 이벤트입니다. 인자로 현재 툴팁이 표시된 요소가 전달됩니다.

onexit

Intro.js가 종료될 때 호출되는 이벤트입니다.

이와 같은 API 및 이벤트 콜백 함수를 사용하여 Intro.js를 통해 사용자에게 좀 더 효과적으로 기능을 소개하고 안내할 수 있습니다.

더 자세한 내용은 Intro.js 공식 문서를 참고하시기 바랍니다.