jQuery - Producttour.js

Producttour.js is a jQuery plugin for quickly and easily implementing of help guide into your website.

A Simple of producttour.js example as shown below

<!doctype html>

<html lang = "en" class = "no-js">

 

   <head>

      <meta charset = "UTF-8">

      <meta name = "viewport" content = "width = device-width,

         initial-scale = 1">

      <link rel = "stylesheet" href = "css/reset.css">

      <link rel = "stylesheet" href = "css/style.css">

      <script src = "js/modernizr.js"></script>

   </head>

           

   <body background = "tp.png">

           

      <div class = "cd-nugget-info">

         <button id = "cd-tour-trigger" class = "cd-btn">Start tour</button>

      </div>

 

      <ul class = "cd-tour-wrapper">

                       

         <li class = "cd-single-step">

            <span>Step 1</span>

 

            <div class = "cd-more-info bottom">

               <h2>Step Number 1</h2>

               <p>Lorem ipsum dolor sit amet, consectetur adipisicing

                  elit. Modi alias animi molestias in, aperiam.</p>

               <img src = "img/step-1.png" alt = "step 1">

            </div>

                                                

         </li>

 

         <li class = "cd-single-step">

            <span>Step 2</span>

 

            <div class = "cd-more-info top">

               <h2>Step Number 2</h2>

               <p>Lorem ipsum dolor sit amet, consectetur

                  adipisicing elit. Officia quasi in quisquam.</p>

               <img src = "img/step-2.png" alt = "step 2">

            </div>

                                                            

         </li>

 

         <li class = "cd-single-step">

            <span>Step 3</span>

 

            <div class = "cd-more-info right">

               <h2>Step Number 3</h2>

               <p>Lorem ipsum dolor sit amet, consectetur adipisicing

                  elit. Optio illo non enim ut necessitatibus perspiciatis,

                  dignissimos.</p>

               <img src = "img/step-3.png" alt = "step 3">

            </div>

                                                

         </li>

                                    

      </ul>

 

 

      <script src = "js/jquery-2.1.4.js"></script>

      <script src = "js/jquery.mobile.min.js"></script>

      <script src = "js/main.js"></script>

                       

   </body>

 

</html>