Basic setup tour consisting of 3 steps with validation. You can use the 'onShowStep' and 'onHideStep' callback functions to validate every step if needed.
More help: Validation
Demo box 1
(hookTo)Demo box 2
(hookTo)Demo box 3
(hookTo)<!-- PowerTour core stylesheet(required) --> <link rel="stylesheet" href="css/powertour/powertour.3.2.0.css"/> <!-- PowerTour styling stylesheet (optional) --> <link rel="stylesheet" href="css/powertour/powertour-style-clean.css"/> <!-- CSS3 animations stylesheet(needed for animations) --> <link rel="stylesheet" href="css/powertour/animate.min.css"/> <!-- jQuery core (required) --> <script src="js/assets/jquery-1.12.3.min.js"></script> <!-- PowerTour plugin (required) --> <script src="js/powertour/powertour.lite.3.1.0.min.js"></script>
$.powerTour({
tours : [
{
trigger : '#powertour-demo-trigger-id',
startWith : 1,
easyCancel : true,
escKeyCancel : true,
scrollHorizontal : false,
keyboardNavigation : true,
loopTour : false,
highlightStartSpeed: 200,
highlightEndSpeed : 200,
onStartTour : function(ui){ },
onEndTour : function(ui){ },
onProgress : function(ui){ },
steps : [
{
hookTo : '#powertour-demo-box-1',
content : '#step-id-1',
width : 400,
position : 'bm',
offsetY : 20,
offsetX : 0,
fxIn : 'flipInX',
fxOut : 'bounceOutLeft',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : false,
keepHighlighted : false,
keepVisible : false,
onShowStep : function(ui){
// button variable
var nextBtn = ui.currentStep.find('[data-powertour-action="next"]');
// disable the next button at default
$('body').attr('data-powertour-disable-next', true);
// add a visual class to the button at default(not required)
nextBtn.addClass('btn-disable');
// validate the input
$('#step-validation-input-1').keyup(function(e){
if($(this).val().length > 3){
// enable the next button
$('body').removeAttr('data-powertour-disable-next');
// remove the visual class from the button(not required)
nextBtn.removeClass('btn-disable');
}
});
},
onHideStep : function(ui){
// remove the next button again
$('body').removeAttr('data-powertour-disable-next');
// clear the input after
$('#step-validation-input-1').val('');
}
},
{
hookTo : '#powertour-demo-box-2',
content : '#step-id-2',
width : 300,
position : 'lt',
offsetY : 0,
offsetX : 20,
fxIn : 'fadeIn',
fxOut : 'fadeOut',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : true,
keepHighlighted : false,
keepVisible : false,
onShowStep : function(ui){
// button variable
var prevBtn = ui.currentStep.find('[data-powertour-action="prev"]');
var nextBtn = ui.currentStep.find('[data-powertour-action="next"]');
// disable the prev/next button at default
$('body').attr('data-powertour-disable-prev', true);
$('body').attr('data-powertour-disable-next', true);
// add a visual class to the button at default(not required)
prevBtn.addClass('btn-disable');
nextBtn.addClass('btn-disable');
// validate the input
$('#step-validation-input-2').keyup(function(e){
if($(this).val().length > 3){
// enable the prev/next button
$('body').removeAttr('data-powertour-disable-prev');
$('body').removeAttr('data-powertour-disable-next');
// remove the visual class from the button(not required)
prevBtn.removeClass('btn-disable');
nextBtn.removeClass('btn-disable');
}
});
},
onHideStep : function(ui){
// remove the prev/next button again
$('body').removeAttr('data-powertour-disable-prev');
$('body').removeAttr('data-powertour-disable-next');
// clear the input after
$('#step-validation-input-2').val('');
}
},
{
hookTo : '#powertour-demo-box-3',
content : '#step-id-3',
width : 400,
position : 'tr',
offsetY : -80,
offsetX : 40,
fxIn : 'rotateIn',
fxOut : 'rotateOut',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : false,
keepHighlighted : false,
keepVisible : false,
onShowStep : function(ui){
// button variable
var prevBtn = ui.currentStep.find('[data-powertour-action="prev"]');
// disable the prev button at default
$('body').attr('data-powertour-disable-prev', true);
// add a visual class to the button at default(not required)
prevBtn.addClass('btn-disable');
// validate the input
$('#step-validation-input-3').keyup(function(e){
if($(this).val().length > 3){
// enable the next button
$('body').removeAttr('data-powertour-disable-prev');
// remove the visual class from the button(not required)
prevBtn.removeClass('btn-disable');
}
});
},
onHideStep : function(ui){
// remove the prev button again
$('body').removeAttr('data-powertour-disable-prev');
// clear the input after
$('#step-validation-input-3').val('');
}
}
]
}
]
});
<a href="#" id="powertour-demo-trigger-id">Run Power Tour</a>
<div class="single-step" id="step-id-1">
<h3>Step one</h3>
<p>This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.</p>
<br/>
<input type="text" class="input-field" placeholder="Enter something here" id="step-validation-input-1"/>
<br/>
<br/>
<a href="#" data-powertour-action="next">Next step...</a>
</div>
<div class="single-step" id="step-id-2">
<h3>Step two</h3>
<p>This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.</p>
<br/>
<input type="text" class="input-field" placeholder="Enter something here" id="step-validation-input-2"/>
<br/>
<br/>
<a href="#" data-powertour-action="prev">Prev step</a>
<a href="#" data-powertour-action="next" style="float:right">Next step</a>
</div>
<div class="single-step" id="step-id-3">
<h3>Step three</h3>
<p>This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.</p>
<br/>
<input type="text" class="input-field" placeholder="Enter something here" id="step-validation-input-3"/>
<br/>
<br/>
<a href="#" data-powertour-action="prev">Prev step...</a>
<a href="#" data-powertour-action="stop" style="float:right">End tour</a>
</div>
<html>
<head>
<!-- PowerTour core stylesheet(required) -->
<link rel="stylesheet" href="css/powertour/powertour.3.2.0.css"/>
<!-- PowerTour styling stylesheet (optional) -->
<link rel="stylesheet" href="css/powertour/powertour-style-clean.css"/>
<!-- CSS3 animations stylesheet(needed for animations) -->
<link rel="stylesheet" href="css/powertour/animate.min.css"/>
<!-- jQuery core (required) -->
<script src="js/assets/jquery-1.12.3.min.js"></script>
<!-- PowerTour plugin (required) -->
<script src="js/powertour/powertour.lite.3.1.0.min.js"></script>
<script>
$(document).ready(function($){
$.powerTour({
tours : [
{
trigger : '#powertour-demo-trigger-id',
startWith : 1,
easyCancel : true,
escKeyCancel : true,
scrollHorizontal : false,
keyboardNavigation : true,
loopTour : false,
highlightStartSpeed: 200,
highlightEndSpeed : 200,
onStartTour : function(ui){ },
onEndTour : function(ui){ },
onProgress : function(ui){ },
steps : [
{
hookTo : '#powertour-demo-box-1',
content : '#step-id-1',
width : 400,
position : 'bm',
offsetY : 20,
offsetX : 0,
fxIn : 'flipInX',
fxOut : 'bounceOutLeft',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : false,
keepHighlighted : false,
keepVisible : false,
onShowStep : function(ui){
// button variable
var nextBtn = ui.currentStep.find('[data-powertour-action="next"]');
// disable the next button at default
$('body').attr('data-powertour-disable-next', true);
// add a visual class to the button at default(not required)
nextBtn.addClass('btn-disable');
// validate the input
$('#step-validation-input-1').keyup(function(e){
if($(this).val().length > 3){
// enable the next button
$('body').removeAttr('data-powertour-disable-next');
// remove the visual class from the button(not required)
nextBtn.removeClass('btn-disable');
}
});
},
onHideStep : function(ui){
// remove the next button again
$('body').removeAttr('data-powertour-disable-next');
// clear the input after
$('#step-validation-input-1').val('');
}
},
{
hookTo : '#powertour-demo-box-2',
content : '#step-id-2',
width : 300,
position : 'lt',
offsetY : 0,
offsetX : 20,
fxIn : 'fadeIn',
fxOut : 'fadeOut',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : true,
keepHighlighted : false,
keepVisible : false,
onShowStep : function(ui){
// button variable
var prevBtn = ui.currentStep.find('[data-powertour-action="prev"]');
var nextBtn = ui.currentStep.find('[data-powertour-action="next"]');
// disable the prev/next button at default
$('body').attr('data-powertour-disable-prev', true);
$('body').attr('data-powertour-disable-next', true);
// add a visual class to the button at default(not required)
prevBtn.addClass('btn-disable');
nextBtn.addClass('btn-disable');
// validate the input
$('#step-validation-input-2').keyup(function(e){
if($(this).val().length > 3){
// enable the prev/next button
$('body').removeAttr('data-powertour-disable-prev');
$('body').removeAttr('data-powertour-disable-next');
// remove the visual class from the button(not required)
prevBtn.removeClass('btn-disable');
nextBtn.removeClass('btn-disable');
}
});
},
onHideStep : function(ui){
// remove the prev/next button again
$('body').removeAttr('data-powertour-disable-prev');
$('body').removeAttr('data-powertour-disable-next');
// clear the input after
$('#step-validation-input-2').val('');
}
},
{
hookTo : '#powertour-demo-box-3',
content : '#step-id-3',
width : 400,
position : 'tr',
offsetY : -80,
offsetX : 40,
fxIn : 'rotateIn',
fxOut : 'rotateOut',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : false,
keepHighlighted : false,
keepVisible : false,
onShowStep : function(ui){
// button variable
var prevBtn = ui.currentStep.find('[data-powertour-action="prev"]');
// disable the prev button at default
$('body').attr('data-powertour-disable-prev', true);
// add a visual class to the button at default(not required)
prevBtn.addClass('btn-disable');
// validate the input
$('#step-validation-input-3').keyup(function(e){
if($(this).val().length > 3){
// enable the next button
$('body').removeAttr('data-powertour-disable-prev');
// remove the visual class from the button(not required)
prevBtn.removeClass('btn-disable');
}
});
},
onHideStep : function(ui){
// remove the prev button again
$('body').removeAttr('data-powertour-disable-prev');
// clear the input after
$('#step-validation-input-3').val('');
}
}
]
}
]
});
});
</script>
</head>
<body>
<!-- trigger -->
<a href="#" id="powertour-demo-trigger-id">Run Power Tour</a>
<!-- hookTo -->
<div class="powertour-demo-box" id="powertour-demo-box-1">
<p>Demo box 1</p>
<span>(hookTo)</span>
</div>
<div class="powertour-demo-box" id="powertour-demo-box-2">
<p>Demo box 2</p>
<span>(hookTo)</span>
</div>
<div class="powertour-demo-box" id="powertour-demo-box-3">
<p>Demo box 3</p>
<span>(hookTo)</span>
</div>
<!-- steps(content) -->
<div class="single-step" id="step-id-1">
<h3>Step one</h3>
<p>This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.</p>
<br/>
<input type="text" class="input-field" placeholder="Enter something here" id="step-validation-input-1"/>
<br/>
<br/>
<a href="#" data-powertour-action="next">Next step...</a>
</div>
<div class="single-step" id="step-id-2">
<h3>Step two</h3>
<p>This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.</p>
<br/>
<input type="text" class="input-field" placeholder="Enter something here" id="step-validation-input-2"/>
<br/>
<br/>
<a href="#" data-powertour-action="prev">Prev step</a>
<a href="#" data-powertour-action="next" style="float:right">Next step</a>
</div>
<div class="single-step" id="step-id-3">
<h3>Step three</h3>
<p>This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.</p>
<br/>
<input type="text" class="input-field" placeholder="Enter something here" id="step-validation-input-3"/>
<br/>
<br/>
<a href="#" data-powertour-action="prev">Prev step...</a>
<a href="#" data-powertour-action="stop" style="float:right">End tour</a>
</div>
</body>
</html>
This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.
This is the second step and should be located next to (left side) 'demo box 2' example blocks. This step highlights the step and hookTo element.
This is the third and last step and should be located above and over the 'demo box 3' example blocks with the use of the 'offsetY' and 'offsetX' options.