Basic setup tour consisting of 3 steps that only use the 'step default' values.
More help: Setup plugin -> defaults
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.3.2.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'
},
{
hookTo : '#powertour-demo-box-2',
content : '#step-id-2'
},
{
hookTo : '#powertour-demo-box-3',
content : '#step-id-3'
}
],
stepDefaults : [
{
width : 300,
position : 'tm',
offsetY : 20,
offsetX : 0,
fxIn : 'fadeIn',
fxOut : 'fadeOut',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
timer : '00:00',
highlight : false,
keepHighlighted : false,
keepVisible : false,
onShowStep : function(ui){ },
onHideStep : function(ui){ }
}
]
}
]
});
<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 above (inc offsetX ) 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 first step. It should be located above (inc offsetX ) the 'demo box 2' example blocks.</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 first step. It should be located above (inc offsetX ) the 'demo box 3' example blocks.</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.3.2.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'
},
{
hookTo : '#powertour-demo-box-2',
content : '#step-id-2'
},
{
hookTo : '#powertour-demo-box-3',
content : '#step-id-3'
}
],
stepDefaults : [
{
width : 300,
position : 'tm',
offsetY : 20,
offsetX : 0,
fxIn : 'fadeIn',
fxOut : 'fadeOut',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
timer : '00:00',
highlight : false,
keepHighlighted : false,
keepVisible : false,
onShowStep : function(ui){ },
onHideStep : function(ui){ }
}
]
}
]
});
});
</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 above (inc offsetX ) 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 first step. It should be located above (inc offsetX ) the 'demo box 2' example blocks.</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 first step. It should be located above (inc offsetX ) the 'demo box 3' example blocks.</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 above (inc offsetX ) the 'demo box 1' example blocks.
This is the first step. It should be located above (inc offsetX ) the 'demo box 2' example blocks.
This is the first step. It should be located above (inc offsetX ) the 'demo box 3' example blocks.