Basic setup tour consisting of 3 steps which will run if the pages get loaded.
More help: Tour triggers | API methods
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.tiny.3.1.0.min.js"></script>
$.powerTour({
tours : [
{
trigger : '#powertour-demo-trigger-id',
startWith : 1,
easyCancel : true,
escKeyCancel : true,
scrollHorizontal : false,
keyboardNavigation : true,
highlightStartSpeed: 200,
highlightEndSpeed : 200,
steps : [
{
hookTo : '#powertour-demo-box-1',
content : '#step-id-1',
width : 400,
position : 'bm',
offsetY : 20,
offsetX : 0,
showStepDelay : 0,
center : 'step',
scrollDelay : 0,
highlight : false
},
{
hookTo : '#powertour-demo-box-2',
content : '#step-id-2',
width : 300,
position : 'lt',
offsetY : 0,
offsetX : 20,
showStepDelay : 0,
center : 'step',
scrollDelay : 0,
highlight : true
},
{
hookTo : '#powertour-demo-box-3',
content : '#step-id-3',
width : 400,
position : 'tr',
offsetY : -80,
offsetX : 40,
showStepDelay : 0,
center : 'step',
scrollDelay : 0,
highlight : false
}
]
}
]
});
// run on load trigger method
$.powerTour('run',1);
<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/>
<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/>
<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/>
<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.tiny.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,
highlightStartSpeed: 200,
highlightEndSpeed : 200,
steps : [
{
hookTo : '#powertour-demo-box-1',
content : '#step-id-1',
width : 400,
position : 'bm',
offsetY : 20,
offsetX : 0,
showStepDelay : 0,
center : 'step',
scrollDelay : 0,
highlight : false
},
{
hookTo : '#powertour-demo-box-2',
content : '#step-id-2',
width : 300,
position : 'lt',
offsetY : 0,
offsetX : 20,
showStepDelay : 0,
center : 'step',
scrollDelay : 0,
highlight : true
},
{
hookTo : '#powertour-demo-box-3',
content : '#step-id-3',
width : 400,
position : 'tr',
offsetY : -80,
offsetX : 40,
showStepDelay : 0,
center : 'step',
scrollDelay : 0,
highlight : false
}
]
}
]
});
// run on load trigger method
$.powerTour('run',1);
});
</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/>
<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/>
<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/>
<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.