Basic setup of 2 tours on 1 page consisting of 3 steps (first tour) and 2 steps (second tour).
Demo box 1
(hookTo)Demo box 2
(hookTo)Demo box 3
(hookTo)Demo box 4
(hookTo)Demo box 5
(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 : [
// tour 1
{
trigger : '#powertour-demo-trigger-id-1',
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){},
onHideStep : function(ui){ }
},
{
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){},
onHideStep : function(ui){ }
},
{
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){},
onHideStep : function(ui){ }
}
]
},
//tour 2
{
trigger : '#powertour-demo-trigger-id-2',
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-4',
content : '#step-id-4',
width : 400,
position : 'rt',
offsetY : 0,
offsetX : 20,
fxIn : 'flipInX',
fxOut : 'bounceOutLeft',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : true,
keepHighlighted : true,
keepVisible : false,
onShowStep : function(ui){},
onHideStep : function(ui){ }
},
{
hookTo : '#powertour-demo-box-5',
content : '#step-id-5',
width : 400,
position : 'bm',
offsetY : 20,
offsetX : 0,
fxIn : 'flipInX',
fxOut : 'bounceOutLeft',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : true,
keepHighlighted : true,
keepVisible : false,
onShowStep : function(ui){},
onHideStep : function(ui){ }
}
]
}
]
});
<a href="#" id="powertour-demo-trigger-id-1">Run Power Tour 1</a> <a href="#" id="powertour-demo-trigger-id-2">Run Power Tour 2</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/>
<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>
<div class="single-step" id="step-id-4">
<h3>Step 1 (tour 2)</h3>
<p>This is the first step of the second tour on this page. This stpe is located on the right next to the 'demo box 4' example blocks.
We will highlight every step/hookTo and keep the highlight during the transition of the steps.</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-5">
<h3>Step 2 (tour 2)</h3>
<p>This is the first step of the second tour on this page. This stpe is located below the 'demo box 5' 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.lite.3.1.0.min.js"></script>
<script>
$(document).ready(function($){
$.powerTour({
tours : [
// tour 1
{
trigger : '#powertour-demo-trigger-id-1',
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){},
onHideStep : function(ui){ }
},
{
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){},
onHideStep : function(ui){ }
},
{
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){},
onHideStep : function(ui){ }
}
]
},
//tour 2
{
trigger : '#powertour-demo-trigger-id-2',
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-4',
content : '#step-id-4',
width : 400,
position : 'rt',
offsetY : 0,
offsetX : 20,
fxIn : 'flipInX',
fxOut : 'bounceOutLeft',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : true,
keepHighlighted : true,
keepVisible : false,
onShowStep : function(ui){},
onHideStep : function(ui){ }
},
{
hookTo : '#powertour-demo-box-5',
content : '#step-id-5',
width : 400,
position : 'bm',
offsetY : 20,
offsetX : 0,
fxIn : 'flipInX',
fxOut : 'bounceOutLeft',
showStepDelay : 0,
center : 'step',
scrollSpeed : 400,
scrollEasing : 'swing',
scrollDelay : 0,
highlight : true,
keepHighlighted : true,
keepVisible : false,
onShowStep : function(ui){},
onHideStep : function(ui){ }
}
]
}
]
});
});
</script>
</head>
<body>
<!-- trigger -->
<a href="#" id="powertour-demo-trigger-id-1">Run Power Tour 1</a>
<a href="#" id="powertour-demo-trigger-id-2">Run Power Tour 2</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>
<div class="powertour-demo-box" id="powertour-demo-box-4">
<p>Demo box 4</p>
<span>(hookTo)</span>
</div>
<div class="powertour-demo-box" id="powertour-demo-box-5">
<p>Demo box 5</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>
<div class="single-step" id="step-id-4">
<h3>Step 1 (tour 2)</h3>
<p>This is the first step of the second tour on this page. This stpe is located on the right next to the 'demo box 4' example blocks.
We will highlight every step/hookTo and keep the highlight during the transition of the steps.</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-5">
<h3>Step 2 (tour 2)</h3>
<p>This is the first step of the second tour on this page. This stpe is located below the 'demo box 5' 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 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.
This is the first step of the second tour on this page. This stpe is located on the right next to the 'demo box 4' example blocks. We will highlight every step/hookTo and keep the highlight during the transition of the steps.
This is the first step of the second tour on this page. This stpe is located below the 'demo box 5' example blocks.