Documentation

Everyting you need to know about the Power Tour plugin.

Power Tour

Power Tour is a powerful jQuery tour plugin, which can be used as a tour, helpers, guides or tooltips. The plugin is pretty powerful and has a lot of options which gives you the power to build a very cool and creative tour.

Examples

To help you build a tour we have included several examples on how to build different kinds of tours. Examples include from a basic tour, multiple pages tour, using callback functions and using validation. All examples are included in the zip file.

 

 

Examples full:

 

  • single tour
  • double tour
  • callback functions
  • multiple pages tour
  • progressbar
  • run on load
  • run once
  • step defaults
  • tables
  • validation
  • wordpress
  • navigation
  • automated tour
  • minimal setup
  • responsive
  • responsive fullscreen
Examples lite:

 

  • single tour
  • double tour
  • callback functions
  • multiple pages tour
  • progressbar
  • run on load
  • run once
  • tables
  • validation
  • navigation
  • minimal setup
  • responsive
  • responsive fullscreen
Examples tiny:

 

  • single tour
  • double tour
  • multiple pages tour *
  • run on load
  • run once *
  • tables
  • navigation
  • minimal setup
  • responsive
  • responsive fullscreen

 

* These examples are modified and are not the same as the other same examples.

Install plugin

These files should be added inside the <head> element or at the bottom of the HTML/PHP file(s).

 

All Power Tour CSS/JS file's can be found in css/powertour/.. and js/powertour/...

 

All CSS files come in normal and minified versions.

 

The Power Tour files:

 

  1. jquery-x.x.x.min.js (required)
    jQuery main core file.
  2. powertour.x.x.x.min.js (required)
    Power Tour jQuery core file.
  3. powertour.x.x.x.css (required)
    Power Tour CSS core file.
  4. powertour-style-clean.css (optional)
    Power Tour styling CSS file.
  5. animate.min.css (optional)
    CSS3 animations used for the plugin FX options.

 

Preprocessors

All CSS files come in the folowing extentions: .css .less(LESS) & .scss(SASS).

<!-- PowerTour core stylesheet(required) -->
<link rel="stylesheet" href="css/powertour.3.1.0.css"/>

<!-- PowerTour styling stylesheet (optional) -->
<link rel="stylesheet" href="css/powertour-style-clean.css"/>

<!-- CSS3 animations stylesheet(needed for animations) -->
<link rel="stylesheet" href="css/animate.min.css"/>

<!-- PowerTour responsive support (optional) -->
<link rel="stylesheet" href="css/powertour-mobile.css"/>

<!-- jQuery core (required) -->
<script src="js/jquery-1.12.3.min.js"></script>

<!-- PowerTour plugin (required) -->
<script src="js/powertour.3.1.0.min.js"></script>

Versions

The Power Tour plugin come's in three versions, full, lite and tiny. As every tour is build differently the needed options will vary, therefor we made three versions of the plugin, from full with all options to tiny with almost no options. Click on the 'overview' tab for a list of each version and the available options.

 

Prevent errors

Only use 1 version, do NOT use different version on the same page.

// only use 1 version per page!

// full version
<script src="js/powertour.3.1.0.min.js"></script>

// lite version
<script src="js/powertour.lite.3.1.0.min.js"></script>

// tiny version
<script src="js/powertour.tiny.3.1.0.min.js"></script>

 

//plugin call(namespace is the same for all versions)
$.powerTour({
   //options
});

All plugin helpers (see: misc -> plugin helpers -> class name) and API methods work in all of the 3 versions.

 

Tiny Lite Full
tours:[ ] type: object
trigger type: option - location: tours:[ ]
startWith type: option - location: tours:[ ]
easyCancel type: option - location: tours:[ ]
escKeyCancel type: option - location: tours:[ ]
scrollHorizontal type: option - location: tours:[ ]
keyboardNavigation type: option - location: tours:[ ]
loopTour type: option - location: tours:[ ] -
highlightStartSpeed type: option - location: tours:[ ]
highlightEndSpeed type: option - location: tours:[ ]
onStartTour type: callback function - location: tours:[ ] -
onEndTour type: callback function - location: tours:[ ] -
onProgress type: callback function - location: tours:[ ] -
steps:[ ] type: object - location: tours:[ ]
hookTo type: option - location: steps:[ ]
content type: option - location: steps:[ ]
width type: option - location: steps:[ ]
postion type: option - location: steps:[ ]
offsetY type: option - location: steps:[ ]
offsetX type: option - location: steps:[ ]
fxIn type: option - location: steps:[ ] -
fxOut type: option - location: steps:[ ] -
showStepDelay type: option - location: steps:[ ]
center type: option - location: steps:[ ]
scrollSpeed type: option - location: steps:[ ] -
scrollEasing type: option - location: steps:[ ] -
scrollDelay type: option - location: steps:[ ]
timer type: option - location: steps:[ ] - -
highlight type: option - location: steps:[ ]
keepHighlighted type: option - location: steps:[ ] -
keepVisible type: option - location: steps:[ ] -
onShowStep type: callback function - location: steps:[ ] -
onHideStep type: callback function - location: steps:[ ] -
stepDefaults:[ ] type: object - location: tours:[ ] - -
width type: option - location: stepDefaults:[ ] - -
postion type: option - location: stepDefaults:[ ] - -
offsetY type: option - location: stepDefaults:[ ] - -
offsetX type: option - location: stepDefaults:[ ] - -
fxIn type: option - location: stepDefaults:[ ] - -
fxOut type: option - location: stepDefaults:[ ] - -
showStepDelay type: option - location: stepDefaults:[ ] - -
center type: option - location: stepDefaults:[ ] - -
scrollSpeed type: option - location: stepDefaults:[ ] - -
scrollEasing type: option - location: stepDefaults:[ ] - -
scrollDelay type: option - location: stepDefaults:[ ] - -
timer type: option - location: stepDefaults:[ ] - -
highlight type: option - location: stepDefaults:[ ] - -
keepHighlighted type: option - location: stepDefaults:[ ] - -
keepVisible type: option - location: stepDefaults:[ ] - -
onShowStep type: callback function - location: stepDefaults:[ ] - -
onHideStep type: callback function - location: stepDefaults:[ ] - -
appendMask type: option
Tiny Lite Full

Setup plugin

The Power Tour plugin alows you to setup multiple tours with multiple steps on the same page. You even can continue on the next page with the tour if needed.

 

As of version 2.x.x allmost all steps options can be replaced by the 'stepDefaults' options, this way you don't have to repeat your code. See more about this in the 'setup plugin' section.

 

As of version 2.2.0 you dont have to use the initial plugin selector anymore.

 

Prevent errors

Initializing the tour setup more than once on a page will result in an error.

 

Plugin namespace

All three versions of the plugin use the same namespace $.powerTour.

This is a full setup of a tour (see versions for more).

 

$.powerTour({
    tours : [
    	{
            trigger            : '#starttour',
            startWith          : 1,
            easyCancel         : true,
            escKeyCancel       : true,
            scrollHorizontal   : false,
            keyboardNavigation : true,
            loopTour           : false,
            highlightStartSpeed : 200,// new 2.5.0
            highlightEndSpeed  : 200,// new 2.3.0
            onStartTour        : function(ui){ },
            onEndTour          : function(ui){ },	
            onProgress         : function(ui){ },
            steps : [
                  {
                      hookTo          : '#hook-one',
                      content         : '#step-one',
                      width           : 370,
                      position        : 'str',
                      offsetY         : -20,
                      offsetX         : -20,
                      fxIn            : 'flipInX',
                      fxOut           : 'bounceOutLeft',
                      showStepDelay   : 0,
                      center          : 'step',
                      scrollSpeed     : 400,
                      scrollEasing    : 'swing',
                      scrollDelay     : 0,
                      timer           : '01:09',
                      highlight       : false,
                      keepHighlighted : false,
                      keepVisible     : false,// new 2.2.0
                      onShowStep      : function(ui){},
                      onHideStep      : function(ui){ }
                  },
                  {
                      hookTo          : '#hook-two',
                      content         : '#step-two',
                      width           : 365,
                      position        : 'br',
                      offsetY         : 30,
                      offsetX         : 20,
                      fxIn            : 'bounceIn',
                      fxOut           : 'flipOutY',
                      showStepDelay   : 1000,
                      center          : 'step',
                      scrollSpeed     : 400,
                      scrollEasing    : 'swing',
                      scrollDelay     : 1000,
                      timer           : false,
                      highlight       : true,
                      keepHighlighted : false,
                      onShowStep      : function(ui){ },
                      onHideStep      : function(ui){ }
                  },
                  {
                      // step 3 goes here
                  }
            ],
            stepDefaults : [
                {
                    width           : 300,
                    position        : 'tr',
                    offsetY         : 0,
                    offsetX         : 0,
                    fxIn            : 'fadeIn',
                    fxOut           : 'fadeOut',
                    showStepDelay   : 0,
                    center          : 'step',
                    scrollSpeed     : 400,
                    scrollEasing    : 'swing',
                    scrollDelay     : 0,
                    timer           : '00:00',
                    highlight       : true,
                    keepHighlighted : false,
                    keepVisible     : false,// new 2.2.0
                    onShowStep      : function(ui){ },
                    onHideStep      : function(ui){ }
                }
             ]
        },
        {
           // tour 2 goes here
        }
    ]
});
This is a full setup of a tour (see versions for more).

 

tours: [
    {
        trigger            : '#starttour',
        startWith          : 1,
        easyCancel         : true,
        escKeyCancel       : true,
        scrollHorizontal   : 'vertical',
        keyboardNavigation : true,
        loopTour           : false,
        highlightStartSpeed : 200,// new 2.5.0
        highlightEndSpeed  : 200,// new 2.3.0
        onStartTour        : function(ui){ },	
        onEndTour          : function(ui){ },
        onProgress         : function(ui){ },
        steps              : [ ],
        stepDefaults       : [ ]
    }
]
This is a full setup of a tour (see versions for more).

 

steps : [
    {
        hookTo          : '#hook-eight',
        content         : '#step-eight',
        width           : 405,
        position        : 'br',
        offsetY         : 0,
        offsetX         : 0,
        fxIn            : 'fadeIn',
        fxOut           : 'fadeOut',
        showStepDelay   : 500,
        center          : 'step',
        scrollSpeed     : 400,
        scrollEasing    : 'swing',
        scrollDelay     : 0,
        timer           : '00:00',
        highlight       : false,
        keepHighlighted : false,
        keepVisible     : false,// new 2.2.0
        onShowStep      : function(ui){},
        onHideStep      : function(ui){ }
    }
]
This is a full setup of a tour (see versions for more).

 

stepDefaults : [
    {
        width           : 300,
        position        : 'tr',
        offsetY         : 0,
        offsetX         : 0,
        fxIn            : 'fadeIn',
        fxOut           : 'fadeOut',
        showStepDelay   : 0,
        center          : 'step',
        scrollSpeed     : 400,
        scrollEasing    : 'swing',
        scrollDelay     : 0,
        timer           : '00:00',
        highlight       : true,
        keepHighlighted : false,
        keepVisible     : false,// new 2.2.0
        onShowStep      : function(ui){ },
        onHideStep      : function(ui){ }
    }
]
This is a full setup of a tour (see versions for more).

 

$.powerTour({
    tours : [
                {
                    // TOUR 1
                    
                    steps : [
                                {
                                    // STEP 1
                                },
                                {
                                    // STEP 2
                                },
                                {
                                    // STEP 3
                                } 
                    ]
                    stepDefaults : [
                                        {
                                            // STEP DEFAULTS(optional)
                                        }
                    ]
                },
                {
                    // TOUR 2
                },
                {
                    // TOUR 3
                }
    ],
    appendMask: true//new 3.0.0 use only when needed!
});
Notice: required options are marked red.

 

Tour options

 

Option Type Value Description Default Since
tours[] array This is where you build all of your tour. N/A 2.0.0
trigger string This is the button which will trigger the tour, this can be an id or class attribute. N/A 2.0.0
startWith integer Set the step which you want to start the tour with. 1 2.0.0
easyCancel boolean true, false If set to 'true' the tour will stop(cancel) if a user clicks outside the steps. true 2.0.0
escKeyCancel boolean true, false If set to 'true' the tour will stop(cancel) if the user pressed the ECS key. true 2.0.0
scrollHorizontal boolean true, false If you use a horizontal layout you can set this to true. false 2.0.0
keyboardNavigation boolean true, false Control the tour with the keyboard. More about keyboard navigation here. true 2.0.0
loopTour boolean true, false This allows the tour to loop. It can loop in both directions(last step -> first step, first step -> last step). false 2.0.0
highlightStartSpeed integer When using the 'highlight' option you can use this option to manage the fade in speed of the overlay element(mask). Value = milliseconds. 0 2.5.0
highlightEndSpeed integer When using the 'highlight' option you can use this option to manage the fade out speed of the overlay element(mask). Value = milliseconds. 0 2.3.0
onStartTour function This function is called once when the tour starts. N/A 2.0.0
onEndTour function This function is called when the tour ends. N/A 2.0.0
onProgress function This function is called every time a step is shown. N/A 2.0.0
steps[] array This is where you build all of your steps. N/A 2.0.0
stepDefaults[] array This option contains the default values of every step. N/A 2.0.0
Option Type Value Description Default Since

 

Step options

 

Option Type Value Description Default Since
hookTo string This is the element where you hook the step to.

 

Notice: can only be empty with screen positions. (if default value is a non-screen position and one of the steps 'hookTo' value is empty an error will occur).
N/A 2.0.0
content string This element contains all of the step contents. N/A 2.0.0
width integer The width of the step. 300 2.0.0
position string or boolean see below The position of the step. tl 2.0.0
offsetX integer This is the X offset of the step, this can be an positive or negative number. 0 2.0.0
offsetY integer This is the Y offset of the step, this can be an positive or negative number. 0 2.0.0
fxIn string see below Show step animation.Use the value 'none' if you dont want to use any kind of animations. none 2.0.0
fxOut string see below Hide step animation. Use the value 'none' if you dont want to use any kind of animations. none 2.0.0
showStepDelay integer An delay to show a step. For no delay set to '0'. Value = milliseconds. 0 2.0.0
center string step, hook Choose which element should be centerd. Step or the hook. step 2.0.0
scrollSpeed integer The speed of the animation scroll. Set to '0' to jump directly to the nex/prev hook. Value = milliseconds. 1000 2.0.0
scrollEasing string swing, linear Scroll easing animations. You can use more in combination with the jQuery UI suite. swing 2.0.0
scrollDelay integer A delay before the scrolling starts. Value = milliseconds. 0 2.0.0
timer string or boolean time, false All steps can have an endtime, this when it ends the tour will continue to the next step. Set to 'false' to disable it. You can use 'powertour-placeholder="timer"' to display the countdown. false 2.0.0
highlight boolean true, false You can highlight a step, this means that everything except the step and hook will be blurred. false 2.0.0
keepHighlighted boolean true, false If set to true and if the next step has the option 'higlight' set to true it will keep the overlay/mask active. false 2.0.0
keepVisible boolean true, false If set to true the step will stay visible once it has been called. false 2.2.0
onShowStep function This callback function will run when the step is shown. N/A 2.0.0
onHideStep function This callback function will run when the step goes back to his hidden state. N/A 2.0.0
Option Type Value Description Default Since

 

Stepdefault options

 

Option Type Value Description Default Since
width integer The width of the step. N/A 2.0.0
position string or boolean see below The position of the step. N/A 2.0.0
offsetX integer This is the X offset of the step, this can be an positive or negative number. N/A 2.0.0
offsetY integer This is the Y offset of the step, this can be an positive or negative number. N/A 2.0.0
fxIn string see below Show step animation. Leave this option empty if you dont want to use any kind of animations. N/A 2.0.0
fxOut string see below Hide step animation. Leave this option empty if you dont want to use any kind of animations. N/A 2.0.0
showStepDelay integer An delay to show a step. For no delay set to '0'. Value = milliseconds. N/A 2.0.0
center string step, hook Choose which element should be centerd. Step or the hook. N/A 2.0.0
scrollSpeed integer The speed of the animation scroll. Set to '0' to jump directly to the nex/prev hook. Value = milliseconds. N/A 2.0.0
scrollEasing string swing, linear Scroll easing animations. You can use more in combination with the jQuery UI suite. N/A 2.0.0
scrollDelay integer A delay before the scrolling starts. Value = milliseconds. N/A 2.0.0
timer string or boolean time, false All steps can have an endtime, this when it ends the tour will continue to the next step. Set to 'false' to disable it. N/A 2.0.0
highlight boolean true, false You can highlight a step, this means that everything except the step and hook will be blurred. N/A 2.0.0
keepHighlighted boolean true, false If set to true and if the next step has the option 'higlight' set to true it will keep the overlay/mask active. N/A 2.0.0
keepVisible boolean true, false If set to true the step will stay visible once it has been called. N/A 2.2.0
onShowStep function This callback function will run when the step is shown. N/A 2.0.0
onHideStep function This callback function will run when the step goes back to his hidden state. N/A 2.0.0
Option Type Value Description Default Since

 

Plugin settings

 

Option Type Value Description Default Since
appendMask boolean This is a hidden setting, which you can use if you want to prepend the mask that is used for the highlight option. At default the mask is set to 'append'. See tab 'structure' on how to use this option. true 3.0.0
Option Type Value Description Default Since

Tour triggers

The plugin provides 3 ways to start a tour:

  1. using the trigger option(button)
  2. using the public method called 'run'
  3. using the url parameter

 

All of these 3 ways allow a 'startwith' option which you allow to choose a step to start with. If this option is not used it will use het 'startWith' option or if this option is not used the first step.

<script>
$(document).ready(function($){

    // build tour
    $.powerTour({
        tours:[
            {
                trigger: '#startthetour',
                startWith: 1,// or use the dataset attribute(see below)
                // all other options
            }
        ]
    });
});   
</script>

<a href="#" title="Start tour 1" id="startthetour">Start tour 1(step 1)</a>

<!-- override the 'startWith' option with the dataset attribute -->
<a href="#" title="Start tour 1" id="startthetour" data-powertour-startwith="4">Start tour 1(step 4)</a>
$(document).ready(function($){
                                
    // build tour
    $.powerTour({
        tours:[
            {
                trigger: '',
                startWith: 1,
                // all other options
            }
        ]
    });  
                         
    // run the first tour(more info the the 'API methods' section.
    $.powerTour('run',1);
    //or
    $.powerTour('run',[1, 4]);// first tour, fourth step(overiding the startWith option)

});
<!-- powertour=(1th tour) startwith=(4th step)-->
http://www.yoururl.com?powertour=1&startwith=4

Building the steps

You can use any kind of content inside the steps, this can be a simple form, some text or an carousel. You can even use AJAX to load any kind content into a step once it's shown for the first time, this can be handy with big tours or steps.

 

More about using AJAX can be found on the extend page.

 

Hidden and dynamic content

Using hidden or dynamic content inside the step may require the use of the 'update' method to re-position the step.

 

Unique id's

All steps need to have an unique id, this id is used to place the content in the right wrapper(step). You can not use the same step serveral times in the tour, as this will show an empty wrapper(step).

<div class="stylings-class" id="unique-id-of-step">
<!-- place any kind of content here -->
</div>

Positions

Every step has it's own position option. The position can be divided into 2 types, 1. a hook related position, 2. a screen related position (these are fixed positions). Both types can be adjusted with a negative/positive 'offsetX' and 'offsetY' value.

steps : [
    {
        position : 'br',
        //position : false, // use this if you dont want to set any position
        offsetX  : -50,
        offsetX  : 44
    },
    {
        // next step
    }
],
stepDefaults : [
    {
        position : 'tr',
        //position : false, // use this if you dont want to set any position
        offsetX  : 20,
        offsetX  : -40
    }
]
Value Description Since
false This will not set any position to the step. 2.0.0
tl Top left of the hook 2.0.0
tm Top mid of the hook 2.0.0
tr Top right of the hook 2.0.0
rt Right top of the hook 2.0.0
rm Right mid of the hook 2.0.0
rb Right bottom of the hook 2.0.0
rb Right bottom of the hook 2.0.0
br Bottom right of the hook 2.0.0
bm Bottom mid of the hook 2.0.0
bl Bottom left of the hook 2.0.0
bl Bottom left of the hook 2.0.0
lb Left bottom of the hook 2.0.0
lm Left mid of the hook 2.0.0
lt Left top of the hook 2.0.0
sc Center of the screen 2.0.0
stl Top left of the screen 2.0.0
stm Top mid of the screen 2.0.0
str Top right of the screen 2.0.0
srm Right mid of the screen 2.0.0
sbr Bottom right of the screen 2.0.0
sbm Bottom mid of the screen 2.0.0
slm Left mid of the screen 2.0.0
sbr Bottom right of the screen 2.0.0
Value Description Since
step positions overview

Callback functions

The Power Tour plugin provides several callback function which are fired at certain points in the tour. These functions can contain your own custom code to extend the power of this plugin even more.

 

Valid code

You must use valid code inside the callback functions, if not the tour will stop working.

steps : [
    {
        onShowStep : function(ui){
           
           // example: add/remove a custom class  
                          
           ui.previousStep.removeClass('custom-current-step-class');    
                        
           ui.currentStep.addClass('custom-current-step-class');                     
           
        }
    },
    {
        // next step
    }
],
stepDefaults : [
    {
        onShowStep : function(ui){
           
           // example: add/remove a custom class  
                          
           ui.previousStep.removeClass('custom-current-step-class');    
                        
           ui.currentStep.addClass('custom-current-step-class');                     
           
        }
    }
]
Functions

 

Option Type Description Since
onStartTour function This function is called once when the tour starts. 2.0.0
onEndTour function This function is called when the tour ends. 2.0.0
onProgress function This function is called every time a step is shown. 2.0.0
onShowStep function This callback function will run when the step is shown. 2.0.0
onHideStep function This callback function will run when the step goes back to his hidden state. 2.0.0
Option Type Description Since

 

Parameters

 

Function Parameter Returns Desctription Since
onStartTour ui.currentStep object This is the current step object. 2.0.0
onEndTour ui.currentStep object This is the current step object. 2.0.0
onEndTour ui.previousStep object This is the current step object. 2.0.0
onEndTour ui.endType string This will return the value 'stop' (end by stop button), 'cancel' (end by easycancel) or 'end' (end by timer). 2.0.0
onProgress ui.stepIndex integer This is the current step number. 2.0.0
onProgress ui.totalSteps integer The number of steps that there are in the (current) tour. 2.0.0
onProgress ui.tourIndex integer This is the current tour number. 2.0.0
onShowStep ui.currentStep object This is the current step object. 2.0.0
onShowStep ui.previousStep object This is the current step object. 2.0.0
onHideStep ui.currentStep object This is the current step object. 2.0.0
onHideStep ui.previousStep object This is the current step object. 2.0.0
Function Parameter Returns Desctription Since

Navigation

Manage the tour with the navigation actions/buttons. These custom dataset attributes can be used with almost every kind of element inside or outside the steps. Navigation actions are best used with a anchor element.

 

The tour at defaults supports the use of keyboard navigation, this allows you to navigate through the tour with the use of a keyboard.

 

All actions can be disabled by using the disable dataset element. These datasets can be used for validating a step. On the 'extend' page you will find an example on how to use these dataset elements.

<a href="#" data-powertour-action="first">First</a>
<a href="#" data-powertour-action="prev">Prev</a>

<a href="#" data-powertour-action="goto" data-powertour-goto="1">1</a>
<a href="#" data-powertour-action="goto" data-powertour-goto="2">2</a>
<a href="#" data-powertour-action="goto" data-powertour-goto="3">3</a>

<a href="#" data-powertour-action="next">Next</a>
<a href="#" data-powertour-action="last">Last</a>

<a href="#" data-powertour-action="pause">Pause</a>
<a href="#" data-powertour-action="play">Play</a>
<a href="#" data-powertour-action="toggleplay">Toggle pause/play</a>
<a href="#" data-powertour-action="stop">Stop</a>

<!-- use with any kind of element -->
<span data-powertour-action="stop">Stop</span>
<div data-powertour-action="goto" data-powertour-goto="3">Step 3</div>
Navigation actions

 

Action Usage Desctription Since
first data-powertour-action="first" This directs a user to the first step. 2.0.0
last data-powertour-action="last" This directs a user to the first step. 2.0.0
prev data-powertour-action="prev" This directs a user to the previous step. 2.0.0
next data-powertour-action="next" This directs a user to the next step. 2.0.0
stop data-powertour-action="stop" This stops the tour. 2.0.0
pause data-powertour-action="pause" This pause the tour if the 'timer' option is set. 2.0.0
play data-powertour-action="play" This resumes the tour if the 'timer' option is set. 2.0.0
toggleplay data-powertour-action="toggleplay" This switches between pause & play. 2.0.0
goto data-powertour-action="goto"
data-powertour-goto="3"
Go to step number 3. 2.0.0
Action Usage Desctription Since

 

Keyboard navigation

 

Key Option Description Since
ESC escKeyCancel This key will cancel the tour. 2.0.0
Right arrow keyboardNavigation This key will direct the tour to the next step. 2.0.0
Left arrow keyboardNavigation This key will direct the tour to the previous step. 2.0.0
spacebar keyboardNavigation This key will trigger pause and play(toggle). 2.0.0
Key Option Description Since

 

Validation helpers

 

Action Usage Desctription Since
first data-powertour-disable-first="true" This disables the 'first' action. 2.0.0
last data-powertour-disable-last="true" This disables the 'last' action. 2.0.0
prev data-powertour-disable-prev="true" This disables the 'prev' action. 2.0.0
next data-powertour-disable-next="true" This disables the 'next' action. 2.0.0
stop data-powertour-disable-stop="true" This disables the 'stop' action. 2.0.0
goto data-powertour-disable-goto="true" This disables the 'goto' action. 2.0.0
all data-powertour-disable-all="true" This disables the all actions. 2.0.0
Action Usage Desctription Since

Highlight elements

All steps and hooks can be highlighted towards the whole tour. The main options 'highlightStartSpeed' will control the starting speed (fadein) and 'highlightEndSpeed' will control the ending speed (fadeout) of the overlay background. The options 'highlight' will control the highlighting (true/false) and 'keepHighlighted' will control the visibility of the overlay between the steps if both steps have the 'highlight' option set to true.

 

When needed you can use the class 'powertour-highlight' (see plugin misc -> helpers) to highlight other elements during the tour.

$.powerTour({
    tours : [
    	{
            highlightStartSpeed : 200,
            highlightEndSpeed   : 200,
            steps : [
                  {
                      highlight       : false,
                      keepHighlighted : false
                  }
            ],
            stepDefaults : [
                {
                    highlight       : true,
                    keepHighlighted : false
                }
             ]
        }
    ]
});

Animations

You can choose from more than 60 available CSS3 animations to spice up the tour. Every single step can have there own kind of in and out animation.

 

All animations are provided through a third-party css file called 'animate.css', more about the this file can be found on the animate.css page.

 

Tiny version

Custom CSS3 animations provide by the animate.css file do not work in the tiny version of the plugin.

 

CSS3 support

If the browser does not support CSS3 animations a simple show/hide is used instead.

steps : [
    {
        fxIn  : 'fadeIn',
        fxOut : 'bounceOutLeft'
    },
    {
        // next step
    }
],
stepDefaults : [
    {
        fxIn  : 'fadeIn',
        fxOut : 'bounceOutLeft'
    }
]

The tiny version of the plugin does not support the use of the animate.css animations as the 'fxIn' & 'fxOut' options are not avialable in this version but it has 2 extra custom classes which you can use to add you own custom CSS animations if needed.

 

These classes can befound at the bottom of the powertour.x.x.x.css file and are only available in the tiny version.

 

/* 
    NEW 3.0.0 
    Used FX IN/OUT classes for tiny version, 
    you can modify these 2 classes. 
*/ 
                               
.powertour-fxin{
    opacity            : 1;
    
    -moz-transition    : 0.4s;
    -webkit-transition : 0.4s;
    transition         : 0.4s;	
}

.powertour-fxout{
    opacity            : 0;
    
    -moz-transition    : 0.4s;
    -webkit-transition : 0.4s;
    transition         : 0.4s;	
}

API methods

The Power Tour plugin provides 5 public API methods which can be used to update, run or destroy a tour. See the reference tab for more info about the available API methods.

// update: single argument(step)
$.powerTour('update', '#step-five');
                
// update: argument array(steps)
$.powerTour('update', ["#step-five", "#step-two", "#step-four"]);

// destroy: no arguments
$.powerTour('destroy');

// run: single argument(tour)
$.powerTour('run', 1);

// run: single argument array(tour, step)
$.powerTour('run', [1, 3]);// new 2.4.0

// navigation: single argument(next)
$.powerTour('navigation', 'next');

// navigation: argument array(goto)
$.powerTour('navigation', ["goto", 4]);

// run: method in combination with new click event, 
// use the extra class 'powertour-disable-cancel'!
// Read more about this cancel class 'misc -> plugin helpers'.
$('#newtrigger').addClass('powertour-disable-cancel').click(function(){
	$.powerTour('run', 1);
});

// end: no arguments
$.powerTour('end');
Method Argument(s) Description Since
update step id This will update(reset) the position of the step.

 

Notice: the content of the step must be loaded before you can use this method.
2.0.0
run tour(index number) This will run/start the tour if called. 2.0.0
destroy none Removes the tour functionality completely. This will return the element back to its pre-init state.

 

Notice: this will only destroy the code that have been added by the plugin.
2.0.0
navigation action Trigger the navigation. All available navigation actions can be used.

 

Notice: when using the 'goto' action you need to pass the data as an array.
2.0.4
end none Stops all running tours. 2.2.0
Method Argument(s) Description Since

Misc

Sometimes it will happen that you have done something wrong, have forgotten something therfore in the next tab a list with most common issues.

 

Most common issue

Most common issue are almost always CSS related (see first issue in table).

 

Always double check

Before contacting us and saying the plugin doesn't work please check and recheck your code.

 

 

Problem Cause Solution
Step are not displayed correctly. Overriding css rules. As the steps are child element of the hookto elments it can happen that the step will inherited the hookto element css rules. The issue scan be fixed by managing the hookto css rules. Most issues are z-index or position related.
The tour wont start, or doesn't run as it should. Typo(one or more) or using multiple instances of the plugin. Check the code that you have added/changed.
The position of the step isn't right when i try to hook it to an table cell. Table cells can't have an absolute position. Wrap the cells inner with an element(div, span).
The hook isn't highlighted. The parent(s) element have an position absolute. Change the parent(s) position to relative, or disable the highlight option.
The steps FX are not working. Browser does not support CSS3. Use a modern browser.
The step is empty. Using multiple tours on the same page. The 'content' id can only be used once, therefor use a different id(step).
The wrong step/tour is selected. Using the wrong step/tour number. All options/settings except the url parameters and the 'goto' navigation are zero based numbers.
Some options are not working. Unquoted vs quoted values. Some values(boolean and integers) need to be quoted and some dont.
Uncaught TypeError: Cannot read property 'top' of undefined Cant find the 'hookTo' element. Use an existing element.
Problem Cause Solution

The plugin offers a couple of helper classes/datasets which you can use to extend the Power Tour plugin even more. Most of these helpers are not mentioned in the documentations or extend pages.

 

Class name Description Since
powertour-disable-cancel If you use the 'easyCancel' option only the hook, step and navigation are excluded, everything else will trigger the ending of the tour. This class can be used to excluded extra elements from this event. 2.0.0
powertour-disable-action This class when used on an element with the 'data-powertour-action' attribute will disable this button, this can be usefull if you are adding some kind of validation inside a step. 2.0.0
powertour-highlight This class is used by the plugin it self to highlight the hooks, but you can use this class your self if you need to highlight other elements during the tour. 2.0.0
powertour-activehook This class will be added to the 'hookTo' elmenent once the step is active(visible), this class can be used to give the 'hookTo' element different CSS rules once it's active. 2.7.0
powertour-activestep This class will be added to the step elmenent once the step is active(visible), this class can be used to give the step element different CSS rules once it's active. 2.8.0
Class name Description Since

 

Dataset Value Description Since
data-powertour-placeholder timer This placeholder is used to display the remaining time left untile the next step. This is used with the 'timer' option. 2.0.0
Dataset Value Description Since
Update v3.2.0 - December 21, 2016

 

Fixed: small issue caused by keyboard navigation.

Updated: website UI.

Updated: support for jQuery lib to 3.1.0.

Updated: documentation on how to use validation.

Updated: plugin core.

Update v3.1.0 - April 20, 2016

 

Fixed: issue with the 'destroy' method.

Updated: the documentation.

Updated: animate.css file.

Updated: website UI.

Updated: support for jQuery lib to 1.12.3.

 

Update v3.0.0 - December 4, 2015

 

Fixed: small issue with the examples in google chrome.

Added: 2 new plugin versions(lite & tiny, see: versions).

Added: 3 new examples (minimal setup, responsive & responsive fullscreen).

Added: minified versions of all css files.

Added: new option 'appendMask'.

Updated: the mobile CSS file 'powertour-mobile.css'.

Updated: LESS,SASS & CSS files.

Updated: the use of stepDefaults, these are not mandatory anymore and can be left out if you dont use them.

Updated: plugin core.

Updated: website UI(all pages).

Updated: plugin options to use default settings when not used.

Updated: all examples.

 

Update v2.8.0 - September 24, 2015

 

Fixed: small issue with the z-index.

Fixed: issue with the highlight part.

Added: new indicator class. This class will be added to the 'step' element once it is active. See plugin helpers for more info.

Updated: some parts of the plugin to perform better.

 

Update v2.7.0 - August 27, 2015

 

Fixed: a rare issue with the 'easyCancel' option.

Added: new indicator class. This class will be added to the 'hookTo' element once it is active. See plugin helpers for more info.

Added: several single file examples (included in the zip).

Updated: plugin with small improvements.

Updated: support for jQuery lib to 1.11.3.

Updated: the highlight part (it works much better now).

Updated: the documentaion and extend page.

Updated: the builder tool.

 

Update v2.6.0 - August 07, 2015

 

Added: support for touch events.

 

Update v2.5.1 - July 19, 2015

 

Added: new minimal(all bloat is removed) demo.

Fixed: small issue with the restarting of a tour.

Added: new wordpress 'help theme' demo.

 

Update v2.5.0 - June 19, 2015

 

Added: new option called 'highlightStartSpeed'.

Updated: option 'highlightEndSpeed' it now works proper.

 

Update v2.4.1 - April 13, 2015

 

Fixed: issue with the startWith value.

 

Update v2.4.0 - April 6, 2015

 

Fixed: issue with the destroy method.

Added: startWith parameter to the run method.

 

Update v2.3.0 - March 10, 2015

 

Fixed: issue with the navigation method(single argument).

Added: new option called 'highlightEndSpeed'.

 

Update v2.2.0 - January 13, 2015

 

Added: AMD support.

Updated: the builder tool.

Updated: the animate.css file(10 new fx have been added).

Added: new method called 'end' which will stop the tour when called.

Updated: plugin wrapper, you dont have to use the initial plugin selector anymore.

Added: new option called 'keepVisible' which will keep the active steps visible.

 

Update v2.1.5 - January 23, 2015

 

Fixed: small z-index issue with the steps.

Fixed: fixed several typos in the builder tool.

Updated: our examples, they are now responsive. (see: powertour-mobile.css)

 

Update v2.1.4 - November 24, 2014

 

Fixed: issue with the 'onStartTour' function, it will now run just once.

 

Update v2.1.3 - September 17, 2014

 

Fixed: issue with the 'run' method.

 

Update v2.1.2 - September 15, 2014

 

Fixed: issue with starting a new tour when a tour is already running.

 

Update v2.1.1 - September 12, 2014t

 

Fixed: issue with the 'run' method, it will now use the correct 'startWith' value.

Fixed: issue with the 'destroy' method. It will now destroy the whole tour.

Removed: a line of code for the demo file(used for testing).

 

Update v2.1.0 - August 27, 2014

 

Added: new method which allows you to programmatically access the navigation buttons.

Added: LESS files.

Added: SASS files.

 

Update v2.0.3 - August 07, 2014

 

Fixed: potential issue with the highlight option(highlight class is not removed correctly).

 

Update v2.0.2 - August 06, 2014

 

Fixed: 'width', 'offsetY' and 'offsetX' options, these options can now be empty(use default values instead).

 

Update v2.0.1 - July 15, 2014

 

Fixed: typo in the builder, the options 'highlight' & 'keepHighlighted' are now correct.

Updated: the docs, all speed and delay options are now mentioned as millisecond value's.

 

Update v2.0.0 - July 11, 2014

 

The whole plugin has been rebuild, we've added new feautures, removed the bloat and made it faster.

 

Update v1.7 - December 19, 2013

 

Fixed: issue with keyboard events and non-existing steps.
Added: new option called 'animatedOnEnd' which allows you to stay at the last hook or animate back to the top once the tour is done.

 

Update v1.6 - November 17, 2013

 

Fixed: exit url param.

 

Update v1.5 - September 8, 2013

 

Fixed: typos in the builder. Fixed: the 'runOnload' option, it will now run if set to true.

 

Update v1.4 - August 8, 2013

 

Update: Bug fixes. Added: a new method called 'destroy', this will remove the tour from the page. Update: Code improvements.

 

Update v1.3 - June 15, 2013

 

Added: a new hook/callback to every step called 'onHideStep'. Fixed: a little bug that let you fire hooks/callbacks after the tour has ended. Updated: the jQuery core to work with 1.9.x, 1.10.X and 2.0.2(not fully tested yet)

 

Update v1.2 - November 15, 2012

 

Fixed: issue with the exit url, now it will exit once the tour is done. Fixed: issue with the onFinish callback function. Updated: jQuery core 1.8.2 -> 1.8.3

 

Update v1.1 - October 15, 2012

 

Added: exit url, so you can continue the tour on other pages. Added: an run on page load option, start the tour directly.

We have included 4 .png logo's in the zip.

 

 

logo color logo black

 

 

 

logo white logo white blue