function hoverDisplay(){

    this.textArr = Array();
    this.box;
    this.innerBox;

    //create box
    this.box = document.createElement('div');
    this.box.setAttribute("id", "hoverBox");
    this.innerBox = document.createElement('div');
    this.innerBox.setAttribute("id", "hoverBoxInner");
    this.box.appendChild(this.innerBox);
    document.body.appendChild(this.box);

    this.addBox = function(text, id) {
        this.textArr[id] = text;
    }

    this.showBox = function(e, id) {

        var posx = 0;
        var posy = 0;
        if (!e) {
            var e = window.event;
        }
        if (e.pageX || e.pageY) {
            posx = e.pageX;
            posy = e.pageY;
        }
        else if (e.clientX || e.clientY) {
            posx = e.clientX + document.body.scrollLeft
			    + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop
			    + document.documentElement.scrollTop;
        }

        this.innerBox.innerHTML = this.textArr[id];
        this.box.style.left = (posx+5) + 'px';
        this.box.style.top = (posy+5) + 'px';
        this.box.style.display = "block";
    }

    this.hideBox = function() {
        this.box.style.display = "none";
    }
}