User Onboarding, Product Walkthrough, Feature Guide, whatever you call it, is annoying but PM likes it.

This thing is working in progress. Everything may change during the development. Use it at your own discretion.

npm i a-tour

    new aTour({
      id: 'my-guide', // multiple guide supported
      steps: [
        {
          target: '#app > div > div.page-header',
          hint: 'This is an awesome page header',
          title: 'My page header',
        },
      ],
    }).start()

• new ATour(options) // options has following properties

  • id: string // an identifier
  • container: HTMLElement | string | (() => HTMLElement) // a HTML node, a selector or a function that returns a html node
  • steps: Step[] // properties as below
    • target: string // a css selector targeting the element you want to highlight
    • title: string
    • hint: string
    • clickTargetAsNext?: boolean // enable mouse event on target and click it as "next" button
    • delay?: number // a delay in milliseconds, in case the target element is not yet visible on DOM for reason like, data loading or invoking a modal
    • noPrev?: boolean // disable "prev" button for this step

• instance.start() // starts the guide

• instance.stop() // quite the guide programmatically

• handle scroll
• multiple guides
• hint arrow
• hyper link in hint