Step-by-step Tour With Spotlight Effect – spotlightjs

Preview:

Description:

spotlightjs 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:

Insert the stylesheet spotlight.css and JavaScript spotlight.js into the document.

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

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>

Initialize the spotlightjs library on the first step.

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

Start the tour manually.

spotlight.start();

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

var spotlight = new SpotlightJS({
    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 SpotlightJS({

    // 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();