html - javascript not working when page is loaded qtip2 -

I wrote a good heatmap in javascript, and it has done a great job till now. The heatmap is basically a table with a color variation based on the threshold of the price displayed in the table. I used javascript to create tables, and to set colors. However, I wanted to show a good pop up window, so when the user hovers over the cell of the table, some additional information is displayed. I found this library

  $ (document) .ready (function () {$ ('# mytable td'). Qtip ({overwrite: false, // make sure it can not be Over written text: {text: function} {return "time spent:" + $ (this) .HTML ();}}, position: {my: 'top left', target: 'mouse', viewport Adjust the $ (window), // if possible: {x: 10, y: 10}}, hide: {Fixed: True / helps to prevent tooltip from being hidden during the tutorial!}, Style: 'Ui-tooltip-tipsy UI-tooltip-shadow'});});   
 This function creates a 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 ('TBI'); For (var i = 0; i  = 0 & amp; index> <100) {cell [j] .style.backgroundColor = '# 00BFFF'; } And if (index> 100 & amp; Index> <1000) {cell [j] Style.backgroundColor = "# 6495ED"; } And if (index> 1000 & amp; index> <4000) {cell [j] .style.backgroundColor = "# 4682B4"; } And if (index> 4000 & amp; index index & lt; = 6000) {cell [j] .style.backgroundColor = "# 0000FF"; } Other {Sale [J] Style.backgroundColor = "# 00008B"; } Line [i] .appendChild (cell [ja]); }} Tbo.appendChild (line [i]); } Tab.appendChild (tbo); Document.getElementById ('mytable') appendChild (tab). }   
 My  & lt; Body & gt; I have  inside the tag:  
  & lt; Div id = "body" & gt; & Lt; Div id = "mytable" & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 However, when I load the page, I hope to see the pop-up box when I hover the mouse over the cell's cell, though something happens Apart from this, when I execute this  $ (document) Part  from the terminal of Firebug starts, then the program starts to execute as it seems I have also made sure that the library is being loaded before being used in my page, there is no error in the firebug terminal  & lt; Script src = "http: //localhost/heatmap/javascript/jquery.qtip.js" & gt;   
 Can someone give me a hint that why is this happening? My JavaScript has the  main  function  
  function onload () {$ .post ('index.php / heatmap / getDatalines', function (answer) {var data = Eval ('(' + + + Answer + ')'); var list = []; Maketable (data);}); }   
 thanks  
 whis is said to load:  google.setOnLoadClallback (OnLoad);    
 
 
 After you load the table, you need to make a kyut: < / P> 
  function onload () {$ .post ('index.php / heatmap / getDatalines', function (answer) {var data = eval ('(+ + + + + answer +')); var List = []; Mactable ($); $ ('# mytable Td'). Qtip ({overwrite: false, // make sure it can be overwritten content: {text: function (api)} {"time Spend ": + $ (this) .html ();}}, position: {my: 'top left', target: 'mouse', viewport: $ (window), // if possible adjust : {X: 10, y: 10}}, hide: {Fixed: true / helps prevent tooltip from hiding while tracking!}, Style: 'ui-tooltip-tipsy UI-tooltip-shadow'} )}}); }