Basic setup tour consisting of 3 steps which are hooked to table cells. When using table cells you need to wrap the inner content of the selected cell before you can use them in a tour.
In this example we make use of the 'powertour-active' class (2.7.0) to give each cell a different background color.
| Name | Value | Date |
|---|---|---|
| Ollie Tayler | Lorem ipsum dolor sit amet | 12/09/2015 |
| Dyson Elmo | Nullam eget augue |
22/01/2014 |
| Sefton Darwin | Phasellus in | 10/10/2013 |
| Trevor Shawn | Aliquam orci quam | 02/02/2013 |
<!-- 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-cell-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-cell-2',
content : '#step-id-2',
width : 500,
position : 'tl',
offsetY : 200,
offsetX : -200,
fxIn : 'fadeIn',
fxOut : 'fadeOut',
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-cell-3',
content : '#step-id-3',
width : 400,
position : 'rt',
offsetY : 20,
offsetX : 20,
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){ }
}
]
}
]
});
<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 yellow table cell.</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 above the table itself, and the 'hookTo' element should be highlighted in green.</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 next to the blue highlighted table cell.</p>
<br/>
<a href="#" data-powertour-action="prev">Prev step...</a>
<a href="#" data-powertour-action="stop" style="float:right">End tour</a>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong id="powertour-demo-cell-3">Ollie Tayler</strong></td>
<td>Lorem ipsum dolor sit amet</td>
<td>12/09/2015</td>
</tr>
<tr>
<td><strong>Dyson Elmo</strong></td>
<td><div id="powertour-demo-cell-1">Nullam eget augue</div></td>
<td>22/01/2014</td>
</tr>
<tr>
<td><strong>Sefton Darwin</strong></td>
<td>Phasellus in</td>
<td>10/10/2013</td>
</tr>
<tr>
<td><strong>Trevor Shawn</strong></td>
<td>Aliquam orci quam</td>
<td><div id="powertour-demo-cell-2">02/02/2013</div></td>
</tr>
</tbody>
</table>
<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-cell-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-cell-2',
content : '#step-id-2',
width : 500,
position : 'tl',
offsetY : 200,
offsetX : -200,
fxIn : 'fadeIn',
fxOut : 'fadeOut',
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-cell-3',
content : '#step-id-3',
width : 400,
position : 'rt',
offsetY : 20,
offsetX : 20,
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){ }
}
]
}
]
});
});
</script>
</head>
<body>
<!-- trigger -->
<a href="#" id="powertour-demo-trigger-id">Run Power Tour</a>
<!-- hookTo -->
<table>
<thead>
<tr>
<th>Name</th>
<th>Value</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong id="powertour-demo-cell-3">Ollie Tayler</strong></td>
<td>Lorem ipsum dolor sit amet</td>
<td>12/09/2015</td>
</tr>
<tr>
<td><strong>Dyson Elmo</strong></td>
<td><div id="powertour-demo-cell-1">Nullam eget augue</div></td>
<td>22/01/2014</td>
</tr>
<tr>
<td><strong>Sefton Darwin</strong></td>
<td>Phasellus in</td>
<td>10/10/2013</td>
</tr>
<tr>
<td><strong>Trevor Shawn</strong></td>
<td>Aliquam orci quam</td>
<td><div id="powertour-demo-cell-2">02/02/2013</div></td>
</tr>
</tbody>
</table>
<!-- 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 yellow table cell.</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 above the table itself, and the 'hookTo' element should be highlighted in green.</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 next to the blue highlighted table cell.</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 yellow table cell.
This is the second step and should be located above the table itself, and the 'hookTo' element should be highlighted in green.
This is the third and last step and should be located next to the blue highlighted table cell.