Minimal setup

Minimal setup of a tour with 3 steps. We have used width, fxIn/fxOut and positon but these can be removed too. All most all options have a default value/setting when not used.

 

More help: Options default settings.

Trigger(s)

Example blocks

Source code

Install | Documentation

<!-- 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>

Setup | Documentation

$.powerTour({
    tours : [
        {
            trigger            : '#powertour-demo-trigger-id',
            steps : [
                  {
                      hookTo          : '#powertour-demo-box-1',
                      content         : '#step-id-1',
                      width           : 400,
                      position        : 'bm',                      
                      fxIn            : 'flipInX',
                      fxOut           : 'bounceOutLeft'                      
                  },
                  {
                      hookTo          : '#powertour-demo-box-2',
                      content         : '#step-id-2',
                      width           : 300,
                      position        : 'lt',
                      fxIn            : 'fadeIn',
                      fxOut           : 'fadeOut'                     
                  },
                  {
                      hookTo          : '#powertour-demo-box-3',
                      content         : '#step-id-3',
                      width           : 400,
                      position        : 'tr',                     
                      fxIn            : 'rotateIn',
                      fxOut           : 'rotateOut'                     
                  }		
            ]
        }
    ]
});

Trigger(s) | Documentation

<a href="#" id="powertour-demo-trigger-id">Run Power Tour</a>

Steps | Documentation

<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>

Complete

<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',
                        steps : [
                              {
                                  hookTo          : '#powertour-demo-box-1',
                                  content         : '#step-id-1',
                                  width           : 400,
                                  position        : 'bm',
                                  fxIn            : 'flipInX',
                                  fxOut           : 'bounceOutLeft'                                  
                              },
                              {
                                  hookTo          : '#powertour-demo-box-2',
                                  content         : '#step-id-2',
                                  width           : 300,
                                  position        : 'lt',
                                  fxIn            : 'fadeIn',
                                  fxOut           : 'fadeOut'                                  
                              },
                              {
                                  hookTo          : '#powertour-demo-box-3',
                                  content         : '#step-id-3',
                                  width           : 400,
                                  position        : 'tr',
                                  fxIn            : 'rotateIn',
                                  fxOut           : 'rotateOut'                                 
                              }		
                        ]
                    }
                ]
            });	
        });
    </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>