Step-by-step Tour With Spotlight Effect – spotlightjs

Category: Javascript | November 16, 2018
Author: alvaromontoro
Views Total: 491
Official Page: Go to website
Last Update: November 16, 2018
License: MIT


Step-by-step Tour With Spotlight Effect – spotlightjs


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.


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

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

// stops the tour

// goes to the next step

// back t the previous step

// goes to the first step

// goes to a specific step

// gets the current highlighted selement

// gets the selector of the current highlighted selement

// gets the current step

// gets the text associated to the currently highlighted step

// gets the the total number of steps

You Might Be Interested In:

Leave a Reply