Author: | alvaromontoro |
---|---|
Views Total: | 626 views |
Official Page: | Go to website |
Last Update: | December 29, 2019 |
License: | MIT |
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