Click here to Skip to main content
15,509,706 members
Articles / Web Development / CSS
Posted 22 Jul 2014

Tagged as


5 bookmarked

Overlay a tutorial on an existing web page with jQuery

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
25 Jul 2014CPOL1 min read
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.

Image 1 Image 2

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)

Written By
Software Developer (Senior) Freelancer
Greece Greece
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

-- There are no messages in this forum --