How to make use of it:

Install & Download

# NPM
$ npm i intro.js

1. Include Intro.js and required CSS information in your net web page.

<!-- Core Stylesheet -->
<link href="introjs.css" rel="stylesheet" />
<!-- For RTL -->
<!-- <link href="introjs-rtl.css" rel="stylesheet"/> -->
<!-- JavaScript -->
<script src="intro.js"></script>

2. Include a theme CSS of your alternative on the web page.

<link href="themes/introjs-dark.css" rel="stylesheet">

3. Markup HTML construction. Simply utilizing data-step, data-intro and data-position to create the location tour container.

<div data-step="1" data-intro="Content 1">Feature #1</div>
<div data-step="2" data-intro="Contetn 2" data-position='right'>Feature #2</div>
<div data-step="3" data-intro="Contetn 3" data-position='left'>Feature #3</div>

4. Create a link to set off the positioning tour.

<a href="javascript:void(0);" onclick="javascript:introJs().start();">Show me how</a>

5. All possible choices.

/* Next button label in tooltip box */
nextLabel: "Next",

/* Previous button label in tooltip box */
prevLabel: "Back",

/* Skip button label in tooltip box */
skipLabel: "×",

/* Done button label in tooltip box */
doneLabel: "Done",

/* Hide previous button in the first step? Otherwise, it will be disabled button. */
hidePrev: false,

/* Hide next button in the last step? Otherwise, it will be disabled button (note: this will also hide the "Done" button) */
hideNext: false,

/* Change the Next button to Done in the last step of the intro? otherwise, it will render a disabled button */
nextToDone: true,

/* Default tooltip box position */
tooltipPosition: "bottom",

/* Next CSS class for tooltip boxes */
tooltipClass: "",

/* CSS class that is added to the helperLayer */
highlightClass: "",

/* Close introduction when pressing Escape button? */
exitOnEsc: true,

/* Close introduction when clicking on overlay layer? */
exitOnOverlayClick: true,

/* Show step numbers in introduction? */
showStepNumbers: false,

/* Let user use keyboard to navigate the tour? */
keyboard: true,

/* Show tour control buttons? */
showButtons: true,

/* Show tour bullets? */
showBullets: true,

/* Show tour progress? */
showProgress: false,

/* Scroll to highlighted element? */
scrollToElement: true,

/*
 * Should we scroll the tooltip or target element?
 *
 * Options are: 'element' or 'tooltip'
 */
scrollTo: "element",

/* Padding to add after scrolling when element is not in the viewport (in pixels) */
scrollPadding: 30,

/* Set the overlay opacity */
overlayOpacity: 0.5,

/* To determine the tooltip position automatically based on the window.width/height */
autoPosition: true,

/* Precedence of positions, when auto is enabled */
positionPrecedence: ["bottom", "top", "right", "left"],

/* Disable an interaction with element? */
disableInteraction: false,

/* Set how much padding to be used around helper element */
helperElementPadding: 10,

/* Default hint position */
hintPosition: "top-middle",

/* Hint button label */
hintButtonLabel: "Got it",

/* Adding animation to hints? */
hint: true,

/* additional classes to put on the buttons */
buttonClass: "introjs-button",

/* additional classes to put on progress bar */
progressBarAdditionalClass: false

6. API strategies accessible.

// start the intro
introJs.start()

// goto specific step
introJs.goToStep(step)

// goto specific step with the concrete step
introJs.goToStepNumber(step)

// add step
introJs.addStep(options)

// add steps
introJs.addSteps(steps)

// goto next step
introJs.nextStep()

// back to prev step
introJs.previousStep()

// exit the into
introJs.exit([force])

// set option(s)
introJs.setOption(option, value)
introJs.setOptions(options)

// refresh
introJs.refresh()

// event handlers
introJs.oncomplete(providedCallback)
introJs.onexit(providedCallback)
introJs.onbeforeexit(providedCallback)
introJs.onchange(providedCallback)
introJs.onbeforechange(providedCallback)
introJs.onafterchange(providedCallback)

7. If you wish to add hints to the tours.

<a href='https://example.com/' 
   data-hint='Step one!'
   data-hintPosition='top-middle'></a>

8. Possible choices for the hints.

{
  hint: 'text for the hint',
  element: element,
  hintPosition: 'top-middle',
  hintAnimation: true
}

9. API strategies for the hints.

// set option(s)
introJs.setOption(option, value)
introJs.setOptions(options)

// refresh
introJs.refresh()

// add hints
introJs.addHints()

// show specified hint
introJs.showHint(hintId)

// show hints
introJs.showHints()

// hide specified hint
introJs.hideHint(stepId)

// show hint dialog
introJs.showHintDialog(stepId)

// hide all hints
introJs.hideHints()

// event handlers
introJs.onhintclick(providedCallback)
introJs.onhintsadded(providedCallback)
introJs.onhintclose(providedCallback)

Simple Step By Step Site Tour Plugin, Intro JS Plugin/Github

See Demo And Download