javascript not working when page is loaded qtip2
===

I wrote a nice heatmap in javascript, and that worked pretty nice so far. The heatmap is basically a table with a coloring variation, based on the threshold of the value displayed in the table. I used JavaScript to create the table, and to set up the colors. However, I wanted to show a nice pop up window, so when the user hover over the table's cell, some additional information is displayed. I found this library [qTip2][1] 

    $(document).ready(function(){
    		
    		$('#mytable td').qtip({
    			overwrite : false,				// make sure it can't be overwritten
    			content : {
    				text : function(api){
    					return "Time spent: " + $(this).html();
    				}
    			},
    			position : {
    				my : 'top left',
    				target : 'mouse',
    				viewport : $(window),		//keep it on-screen at all time if possible
    				adjust : {
    					x : 10, y : 10
    				}
    			},
    			hide : {
    				fixed : true				// Helps to prevent the tooltip from hiding occassionaly when tracking!
    			},
    			style : 'ui-tooltip-tipsy ui-tooltip-shadow'
    		});
    	});

This function creates the heatmap:

    function makeTable(data)
    	{
    		var row = new Array();
    		var cell = new Array();
    		
    		var row_num = 26;
    		var cell_num = 44;
    		
    		var tab = document.createElement('table');
    		tab.setAttribute('id', 'mytable');
    		tab.border = '1px';
    		
    		var tbo = document.createElement('tbody');
    		
    		for(var i = 0; i < row_num; i++){
    			row[i] = document.createElement('tr');
    			
    			var upper = (i+1)*44;
    			var lower = i*44;
    			for(var j = lower; j < upper; j++){
    				cell[j] = document.createElement('td');
    				//cell[j].setAttribute('class', 'selector');
    				if(data[j] != undefined){
    					var count = document.createTextNode(data[j].diff);
    					cell[j].appendChild(count);
    					var index = parseInt(data[j].diff);
    					/* specify which color better suits the heatmap */
    					if(index >= 0 && index <= 100){
    						cell[j].style.backgroundColor = '#00BFFF';
    					}
    					else if(index > 100 && index <= 1000){
    						cell[j].style.backgroundColor = "#6495ED";
    					}
    					else if(index > 1000 && index <= 4000){
    						cell[j].style.backgroundColor = "#4682B4";
    					}
    					else if(index > 4000 && index <= 6000){
    						cell[j].style.backgroundColor = "#0000FF";
    					}
    					else{
    						cell[j].style.backgroundColor = "#00008B";
    					}
    					row[i].appendChild(cell[j]);
    				}
    			}
    			
    			tbo.appendChild(row[i]);
    		}
    		
    		tab.appendChild(tbo);
    		document.getElementById('mytable').appendChild(tab);
    	}

Inside of my `<body>` tag I have:
   

     <div id="body">
           <div id="mytable"></div>
        </div>
However, when I load the page, I expect to see the pop up box when I hover the mouse over the table's cell, however something happens. Also, when I execute that `$(document).ready` part from firebug's terminal, then the program starts to execute as suppose to. I also made sure the library is being loaded into my page before I used it. I also don't see any errors in the firebug's terminal.
`<script src="http://localhost/heatmap/javascript/jquery.qtip.js">`

Could someone please give me a clue why is this happening?
Thanks

  [1]: http://craigsworks.com/projects/qtip2/tutorials/