Responsive

Basic setup tour consisting of 3 steps. If the resolution is lower than 600px the tour will use the responsive CSS rules instead of the plugin settings.

 

More help: Responsive steps

Trigger(s)

Run power tour (trigger)

Example blocks

Demo box 1

(hookTo)

Demo box 2

(hookTo)

Demo box 3

(hookTo)

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',
            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,
                      timer           : '00:00',
                      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,
                      timer           : '00:00',
                      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,
                      timer           : '00:00',
                      highlight       : false,
                      keepHighlighted : false,
                      keepVisible     : false,
                      onShowStep      : function(ui){},
                      onHideStep      : function(ui){ }
                  }		
            ]
        }
    ]
});


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>


CSS 
/*set your own max width size */ 
@media only screen and (max-width : 600px){
    
    /* tour 1 - step 1 */
    #pw-1-1{
        width:200px!important;
        margin-left:-100px!important;
    }
        #pw-1-1 > .single-step{
            background-color:#222;
            color:#fff
        }
            #pw-1-1 > .single-step a{
                color:#fff
            }
            
    /* tour 1 - step 2 */
    #pw-1-2{
        width:200px!important;
        right:40px!important;
    }
        #pw-1-2 > .single-step{
            background-color:#909;
            color:#fff
        }
            #pw-1-2 > .single-step a{
                color:#fff
            }
            
    /* tour 1 - step 3 */
    #pw-1-3{
        width:200px!important;
        right:40px!important;
    }
        #pw-1-3 > .single-step{
            background-color:#06F;
            color:#fff
        }
            #pw-1-3 > .single-step a{
                color:#fff
            }
            
}


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',
                        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,
                                  timer           : '00:00',
                                  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,
                                  timer           : '00:00',
                                  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,
                                  timer           : '00:00',
                                  highlight       : false,
                                  keepHighlighted : false,
                                  keepVisible     : false,
                                  onShowStep      : function(ui){},
                                  onHideStep      : function(ui){ }
                              }		
                        ]
                    }
                ]
            });	
        });
    </script>
    
    <style>
        /*set your own max width size */ 
        @media only screen and (max-width : 600px){
            
            /* tour 1 - step 1 */
            #pw-1-1{
                width:200px!important;
                margin-left:-100px!important;
            }
                #pw-1-1 > .single-step{
                    background-color:#222;
                    color:#fff
                }
                    #pw-1-1 > .single-step a{
                        color:#fff
                    }
                    
            /* tour 1 - step 2 */
            #pw-1-2{
                width:200px!important;
                right:40px!important;
            }
                #pw-1-2 > .single-step{
                    background-color:#909;
                    color:#fff
                }
                    #pw-1-2 > .single-step a{
                        color:#fff
                    }
                    
            /* tour 1 - step 3 */
            #pw-1-3{
                width:200px!important;
                right:40px!important;
            }
                #pw-1-3 > .single-step{
                    background-color:#06F;
                    color:#fff
                }
                    #pw-1-3 > .single-step a{
                        color:#fff
                    }
                    
        }        
	</style>   

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

Step one

This is the first step. It should be located below (inc offsetY ) the 'demo box 1' example blocks.


Next step...

Step two

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.


Prev step Next step

Step three

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.


Prev step... End tour