Step-by-step Tour With Spotlight Effect – Tourguide

Preview:

Description:

Tourguide is a small standalone JavaScript library to create guided tours through your app by highlighting specific elements while navigating between steps.

Useful for small presentations, features, demos, or instructions.

You can customize the shapes, colors, messages to be displayed.

How to use it:

1. Install & download.

# Yarn
$ yarn add tourguide
# NPM
$ npm install tourguide --save

2. Insert the stylesheet tourguide.css.css and JavaScript tourguide.js into the document.

<link rel="stylesheet" href="./tourguide.css">
<script src="./tourguide.js"></script>

3. Add steps to the guided tour.

• ID: Unique ID
• data-sp-next: Selector of next step
• data-sp-text: Custom text

<div id="first" data-sp-next="#step-2" data-sp-text="This is the first step.">Hello! Ready to start? Click here!</div>
<div id="step-2" data-sp-next="#step-3" data-sp-text="Just a few more steps...">This is a small plugin that allows the  easy creation of spotlights that could be useful for small presentations, demos, or instructions.</div>
<div id="step-3" data-sp-next="#bye" data-sp-text="Almost there..." data-sp-shape="round">It is customizable. User can select shapes, colors, messages to be displayed...</div>
<div id="last" data-sp-text="You made it till the end!">Bye! This was the end of the presentation</div>

4. Initialize the TourGuide library on the first step.

var spotlight = new TourGuide({
    init: "#first"
});

5. Start the tour manually.

TourGuide.start();

6. You can also specify the steps in the JavaScript as follows:

var spotlight = new TourGuide({
    steps:[
      { selector: "#step-1", text: "This is the first step." },
      { selector: "#step-2", text: "This is the last step.", shape: "round" }
    ]
});

More optional settings to customize the guided tour.

var spotlight = new TourGuide({
    // shadow color
    color: "rgba(0, 0, 0, 0.5)",
    // click the first step to trigger the tour    
    initTrigger: false,
    // whether to display the next step link
    next: true,
    nextText: "Next",
    // whether to display the previous step link
    previous: true,
    previousText: "Previous",
    // or 'square',
    shape: "round",
    // whether to display the skip link
    skip: true
    skipText: "Skip presentation"
    
});

API methods.

// starts the tour
spotlight.start();
// stops the tour
spotlight.stop();
// goes to the next step
spotlight.goToNextStep();
// back t the previous step
spotlight.goToPreviousStep();
// goes to the first step
spotlight.goToFirstStep();
// goes to a specific step
spotlight.goToStep(n);
// gets the current highlighted selement
spotlight.getCurrentElement();
// gets the selector of the current highlighted selement
spotlight.getCurrentElementSelector();
// gets the current step
spotlight.getStep();
// gets the text associated to the currently highlighted step
spotlight.getText();
// gets the the total number of steps
spotlight.getTotalSteps();

Changelog:

12/29/2019

• JS & DOC updated