jQuery | Product Tour Plugin

jQuery Product Tour plugin is a lightweight, responsive guided tour plugin for users and programmers to help them understand the usage of product or website with step-by-step instructions. It is a plugin for implementing a quick and easy help guide for the end-users. It helps in generating mobile friendly customizable step-by-step guided tour for web applications. It provides a “free-trial” version of the web product for new users for gathering more knowledge about the product.

Note: Please download the following library files from Product tour plugin and save it in your working folder to include in your codes. The programmers can change the path and CSS files as per the project requirements.

Program: The following example demonstrates the basic working of the Product tour plugin developed using CSS and javascript code. The HTML page consists of an unordered list with list items. Each list item holds one step of the product tour guide along with the plugin’s classes which controls the attributes like title, description, images for mobiles and the position of the tooltip of any step.

<!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> 
  
    <title>jQuery Product tour plugin</title> 
  
    <style> 
        body { 
            text-align: center; 
        } 
  
        .height { 
            height: 10px; 
        } 
    </style> 
</head> 
  
<body background="images/geeksImage1.png"> 
    <div class="height"></div><br /> 
    <b>jQuery Product tour plugin</b> 
  
    <div class="cd-nugget-info"> 
        <h1>GeeksforGeeks Product Tour</h1> 
        <button id="cd-tour-trigger" class="cd-btn"> 
            Start GFG tour 
        </button> 
    </div> 
  
    <ul class="cd-tour-wrapper"> 
        <li class="cd-single-step"> 
            <span>Step 1</span> 
  
            <div class="cd-more-info bottom"> 
                <h2><a href= 
"https://www.geeksforgeeks.org/write-from-home-challenge-technical-content-writing-event-by-geeksforgeeks/"> 
                        Write From Home Challenge 
                    </a> 
                </h2> 
                  
                <p> 
                    When the whole nation is on the verge 
                    of lockdown due to COVID-19 pandemic  
                    and all Geeks across the country have  
                    to stay indoors, we at GeeksforGeeks 
                    won’t let this outbreak to decrease  
                    your productivity anyhow. And, with  
                    the same concern, GeeksforGeeks is  
                    coming up with the Write From Home  
                    Challenge for you! 
                </p> 
  
                <img src= 
"images/Participate-in-Write-From-Home-Challenge-By-GeeksforGeeks-1024x306.png" 
                alt="step 1"> 
            </div> 
        </li> <!-- .cd-single-step -->
  
        <li class="cd-single-step"> 
            <span>Step 2</span> 
  
            <div class="cd-more-info top"> 
                <h2><a href= 
"https://www.geeksforgeeks.org/must-do-coding-questions-for-companies-like-amazon-microsoft-adobe/"> 
                        Must Do Coding Questions 
                    </a> 
                </h2> 
                  
                <p> 
                    As the placement season is back so are we 
                    to help you ace the interview. You can  
                    also take part in our mock placement  
                    contests which will help you learn different 
                    topics and practice at the same time, 
                    simulating the feeling of a real placement  
                    test environment. 
                </p> 
                <img src="images/gfg4.jpg" alt="step 2"> 
            </div> 
        </li> <!-- .cd-single-step -->
  
        <li class="cd-single-step"> 
            <span>Step 3</span> 
  
            <div class="cd-more-info right"> 
                <h2><a href= 
"https://www.geeksforgeeks.org/what-is-artificial-intelligence-as-a-service-aiaas-in-the-tech-industry/"> 
                        What is Artificial Intelligence 
                    </a> 
                </h2> 
                  
                <p> 
                    Software as a service, Infrastructure as 
                    a service, Platform as a service, etc.  
                    are common services that everyone has  
                    heard of in the tech world. But what  
                    about Artificial Intelligence as a  
                    service?! Most companies these days use  
                    some sort of “as a service” to obtain  
                    services for a fee so that they can focus 
                    on their core business. But AIaaS is  
                    relatively new and its emergence is due  
                    to the rising popularity of Artificial  
                    Intelligence in the IT industry. 
                </p> 
                  
                <img src= 
"images/What-is-Artificial-Intelligence-as-a-Service-AIaaS-in-the-Tech-Industry.png"
                    alt="step 3"> 
            </div> 
        </li> <!-- .cd-single-step -->
    </ul> <!-- .cd-tour-wrapper -->
  
    <!-- used to create fake background app. -->
    <div class="cd-app-screen"></div> 
  
    <div class="cd-cover-layer"></div> 
    <script src="js/jquery-2.1.4.js"></script> 
    <script src="js/jquery.mobile.min.js"></script> 
    <!-- jQuery  resource library -->
    <script src="js/main.js"></script> 
</body> 
  
</html> 

Output:

Output for Mobile:

My Personal Notes

Recommended Posts: