Step-by-step Tour With Spotlight Effect – Tourguide

Category: Javascript | December 29, 2019
Author: alvaromontoro
Views Total: 414 views
Official Page: Go to website
Last Update: December 29, 2019
License: MIT


Step-by-step Tour With Spotlight Effect – Tourguide


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 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.


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

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

// 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



  • JS & DOC updated

You Might Be Interested In:

Leave a Reply