Click here to Skip to main content
12,954,779 members (71,790 online)
Click here to Skip to main content
Add your own
alternative version


5 bookmarked
Posted 22 Jul 2014

Overlay a tutorial on an existing web page with jQuery

, 25 Jul 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
Quickly add an overlay tutorial to your web page


The purpose of this small library is to create a quick-and-dirty tutorial that can be overlayed on an existing web page.

A dark semi-translarent layer (css class DarkLayer, opacity : 0.6) is overlayed on the page. Then one element at a time is highlighted and at the same time a baloon with the "help tip" for this element or site section is displayed. The tutorial can be made up of many tips that are displayed sequentially.

The only  requirement sfor the existing UI is that the elements that are bound to the tutorial have absolute CSS positioning so that the z-index CSS attribute works properly, and also that your page has a top level DIV container.

Using the code

To use this library you must add jQuery and the script file TipEngine.js . Then you can initialize the tutorial on your onLoad event, or when a "show help" link is clicked.

//initialize one or more tips for various elements = [{
    elem: "#content2",
    tipHtml: "<h3>Area 1</h3>This is the description of area1. Click anywhere outside of this baloon, to close the tutorial. Click inside here to go to the next 'slide' ",
    left: "50%",
    top: "5%",
    width: "45%",
    height: "30%"
}, {
    elem: "#content1",
    tipHtml: "<h2>Area 2</h3>Area2 is <B>also very important bla bla bla ",
    left: "50%",
    top: "25%",
    width: "45%",
    height: "50%"

//start the tutorial when something like a "show help" button is clicked. Can also be displayed at
//the load event of the document

$("#helpLink").click(function () {
    TipEngine.current = 0;
    return false;

The bulk of the functionality is inside the script file TipEngine.js

var TipEngine = {

    showTip: function () {

        //initialize stuff when the first tip is displayed
        if (!TipEngine.darkLayer) {
            //your page should have a top level DIV that contains everything else
            TipEngine.container = $("#container");
            TipEngine.darkLayer = $("<div/>").attr("id", "DarkLayer");

        //add the overlay layer that darkens the content

        //get the current tip
        var tip =[TipEngine.current];

        //add a glow effect around the element that the tip concerns
        TipEngine.tipElement = $(tip.elem);
        TipEngine.tipElement.css("z-index", "11").addClass("Glow");

        //create and display the "baloon" that contains the actual tip html
        TipEngine.tipLayer = $("<div/>").attr("id", "TipLayer");
            .css("left", tip.left).css("top",
            .css("width", tip.width).css("height", tip.height)

        //clicking on a tip will go to the next one
        if (TipEngine.current < - 1) {
            TipEngine.tipLayer.append("<p><a href='#'>Next</a></p>").click(function () {
                return false;
        } else {
            //if it's the last one, then just close the tutorial
   () {
                $(TipEngine.tipElement).css("z-index", "9").removeClass("Glow");

                return false;


        //also close the tutorial when the user clicks anywhere outside the tip
        $(document).click(function () {
            $(TipEngine.tipElement).css("z-index", "9").removeClass("Glow");

            return false;

    //go to the next step, as defined in the array that was passed in the tip engine initialization
    nextTip: function () {
        $(TipEngine.tipElement).css("z-index", "9").removeClass("Glow");

        if (TipEngine.current < - 1) {


You also need some CSS classes defined on your page. These are for the overlay layer, the glow effect that is added to the highlighted element and the layer that contains the actual tutorial text.

<style type="text/css">
    /* CSS for the overlay layer that covers the entire page when the tutorial is displayed. Only the element that the current tip is about is made visible and also highlighted with a "glow" */
    #DarkLayer {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        margin: 0;
        padding: 0;
        background-color: black;
        opacity: 0.6;
        z-index: 10;

    .Glow {
        box-shadow: 0 0 20px 10px white;
    /* CSS for the "bubble" that contains the tip of the current element
    #TipLayer {
        -moz-border-radius: 15px;
        border-radius: 15px;
        position: absolute;
        z-index: 11;
        text-align: center;
        padding: 5px;
        background-color: White;


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Theo Kand
Software Developer (Senior) Freelancer
Greece Greece
I started programming as a hobby at the age of 13 using GWBasic. I have contributed to the design, development and roll out of critical projects in large organizations of the Greek public and private sector such as Citibank, Vodafone, WIND, Cosmote, National Bank of Greece and Piraeus Bank of Greece. Most recently I have worked as a Senior .NET Consultant in EU bodies such as the European Court of Auditors in Luxembourg and the European Railway Agency in France.

You may also be interested in...

Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170525.1 | Last Updated 25 Jul 2014
Article Copyright 2014 by Theo Kand
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid