Documentation

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

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

 

$.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
        }
    ]
});

 

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       : [ ]
    }
]

 

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){ }
    }
]

 

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){ }
    }
]

 

$.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!
});

 

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

<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

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

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

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

<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="[value not needed]"	This disables the 'first' action.	2.0.0
last	data-powertour-disable-last="[value not needed]"	This disables the 'last' action.	2.0.0
prev	data-powertour-disable-prev="[value not needed]"	This disables the 'prev' action.	2.0.0
next	data-powertour-disable-next="[value not needed]"	This disables the 'next' action.	2.0.0
stop	data-powertour-disable-stop="[value not needed]"	This disables the 'stop' action.	2.0.0
goto	data-powertour-disable-goto="[value not needed]"	This disables the 'goto' action.	2.0.0
all	data-powertour-disable-all="[value not needed]"	This disables the all actions.	2.0.0
Action	Usage	Desctription	Since

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

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;	
}

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

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.3.0 - March 8, 2021

 

Updated: plugin to be less dependent on jQuery. Parts of the plugin have been updated to vanilla. (full version only)

 

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.