Framework7 Plugin Tour Guide

Brief description

A plugin that takes advantage of Framework7 Popover elements to display a tour guide through your application.

Screenshots

Main Screen

First Step

Second Step

Last Step

Setup

Copy tourguide.css and tourguide.js to your project and reference them:

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

Define tour steps

var tourSteps = [
    {
        step: 0, 
        header: '1st Tour Step', 
        message: 'This is our first tour step.<br />Please click "next" or "back" to move forward and backwards respectively', 
        element: "body > div.views > div > div.toolbar > div > a:nth-child(1)", 
        action: function ()
        {
            console.log('Started guided tour');
            console.log('Step 0');
        }
    }, 
    {
        step: 1, 
        header: '2nd Tour Step', 
        message: 'This is our seconds tour step.<br />You can use icons and images too! Wow!<br /><br /> F7 Icon:<br /> <i class="icon icon-back"></i><br /><br />Image:<br /> <div style="background-image: url(http://cdn.framework7.io/i/logo-new.png); width: 100px; height: 100px; background-size: cover; margin: 0 auto";></div><br />Please click "next" or "back" to move forward and backwards respectively', 
        element: "body > div.views > div > div.navbar > div > div.right > a", 
        action: function ()
        {
            console.log('Step 1');
        }
    }, 
    {
        step: 2, 
        header: '3rd and Final Step', 
        message: 'Congratulations! You have finished your Tour Guide tutorial. Enjoy it :D', 
        element: "body > div.views > div > div.navbar > div > div.right > a", 
        action: function ()
        {
            console.log('Step 2');
            console.log('Last step on guided tour');
        }
    }];

Parameters

step Set a step id for this tour step
header Set the tour step header (plain text, HTML, ...)
message Set the tour step message (plain text, HTML, ...)
element Set the element where you want to point the tour step (CSS Selector)
action Define a function to execute some code snippet on current tour step or null if you don't want to do anything

Initialize & options

var myApp = new Framework7();
var options = {...};
            
var tourguide = myApp.tourguide(tourSteps, options);

Available options (if not set, default will be used)

previousButton // optional, defaults to false
nextButtonText // optional next button text, defaults to 'Next'
endTourButtonText // optional endTourButtonText, defaults to 'Done'
previousButtonText // optional previousButtonText, defaults to 'Previous'
template // optional template for tour step, defaults to the defaultTourGuideTemplate
customCSS // optional css class, defaults to 'tour-guide-popover'

API

The following methods are available on a tourguide instance

tourguide.moveForward();         // moves to next step
tourguide.moveBackward();        // moves to previous step if allowed

Credits

Developed by www.cesarteixeira.pt

Please contribute ;)