Step-tracker progressbar

This is to create a steps progress bar indicator for list of steps which can highlight the completed steps to show its progress. Also have ability to add tool-tip to each steps.

by er_sanjeevrai

HTML

<script src="https://googledrive.com/host/0B7wJaDu3tH-OTFBReDMydmZvWnc/ProgressTracker.js"></script>
<div class="demoContainer">
        <h2>ProgressTracker plugin demo with tooltip</h2>
        <div id="tracker1" style="width: 700px">
        </div>
        <h2>ProgressTracker plugin demo without tooltip on steps</h2>
        <div id="tracker2" style="width: 1000px">
        </div>
        <h2>ProgressTracker plugin demo2: Show tooltip on seleced steps</h2>
        <div id="tracker3" style="width: 1200px">
        </div>
        <h2>ProgressTracker plugin demo4: tooltip position left</h2>
        <div id="tracker4" style="width: 1000px">
        </div>
    </div>

CSS

/*Progress tracker CSS*/
ol.progtrckr {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

    ol.progtrckr li {
        display: inline-block;
        text-align: center;
        line-height: 3em;
    }

        ol.progtrckr li.progtrckr-done {
            color: black;
            border-bottom: 4px solid yellowgreen;
        }

        ol.progtrckr li.progtrckr-todo {
            color: silver;
            border-bottom: 4px solid silver;
        }

        /*ol.progtrckr li:after {
            content: "\00a0\00a0";
        }*/

        ol.progtrckr li:before {
            position: relative;
            bottom: -2.5em;
            float: left;
            left: 50%;
            line-height: 1em;
        }

        ol.progtrckr li:first-child {
            text-align: left;
            padding-left: 0 !important;
        }

            ol.progtrckr li:first-child:before {
                left: 0;
            }

            ol.progtrckr li:first-child span.statusTitle {
                position: relative;
                left: -15px;
            }

        ol.progtrckr li:last-child {
            text-align: right;
            padding-right: 0 !important;
        }


            ol.progtrckr li:last-child:before {
                left: 100%;
            }

            ol.progtrckr li:last-child span.statusTitle {
                position: relative;
                right: -15px;
            }

        ol.progtrckr li.progtrckr-done:before {
            content: "\2713";
            color: white;
            background-color: yellowgreen;
            height: 1.2em;
            width: 1.2em;
            line-height: 1.2em;
            border: none;
            border-radius: 1.2em;
            text-align: center;
        }

        ol.progtrckr li.progtrckr-todo:before {
            content: "\039F";
            color: silver;
            background-color: white;
            font-size: 1.5em;
            bottom: -1.6em;
            text-align: center;
 ...

JavaScript

var sampleJson1 = {
    ToolTipPosition: "bottom",
    data: [{ order: 1, Text: "Foo", ToolTipText: "Step1-Foo", highlighted: true },
        { order: 2, Text: "Bar", ToolTipText: "Step2-Bar", highlighted: true },
        { order: 3, Text: "Baz", ToolTipText: "Step3-Baz", highlighted: false },
        { order: 4, Text: "Quux", ToolTipText: "Step4-Quux", highlighted: false }]
};


var sampleJson2 = {
    ToolTipPosition: "top",
    ShowToolTip: false,
    data: [{ order: 1, Text: "Foo", ToolTipText: "Step1-Foo", highlighted: true },
        { order: 2, Text: "Bar", ToolTipText: "Step2-Bar", highlighted: true },
        { order: 3, Text: "Baz", ToolTipText: "Step3-Baz", highlighted: false },
        { order: 4, Text: "Quux", ToolTipText: "Step4-Quux", highlighted: false }]
};

var sampleJson3 = {
    ToolTipPosition: "top",
    ShowToolTip: true,
    data: [{ "order": 1, "Text": "Saved", "ToolTipText": "By PQR ", "highlighted": true },
        { "order": 2, "Text": "Pending Team Lead Review", "ToolTipText": "By XYZ", "highlighted": true },
        { "order": 3, "Text": "Pending Manager Review", "ToolTipText": "By ABC on Jul 14, 2014", "highlighted": true },
        { "order": 4, "Text": "Pending CRB Review", "ToolTipText": "", "highlighted": false },
        { "order": 5, "Text": "In Signature Cycle", "ToolTipText": "", "highlighted": false },
        { "order": 6, "Text": "Approved", "ToolTipText": "", "highlighted": false }]
};

var sampleJson4 = {
    ToolTipPosition: "left",
    data: [{ order: 1, Text: "Foo", ToolTipText: "Step1-Foo", highlighted: true },
        { order: 2, Text: "Bar", ToolTipText: "Step2-Bar", highlighted: true },
        { order: 3, Text: "Baz", ToolTipText: "Step3-Baz", highlighted: false },
        { order: 4, Text: "Quux", ToolTipText: "Step4-Quux", highlighted: false }]
};

$(document).ready(function () {
            $("#tracker1").progressTracker(sampleJson1);
            $("#tracker2").progressTracker(sampleJson2);
           ...