javascript not displaying table values html
I'm creating a JavaScript application that when you hover the mouse a small window pops up displaying information about the value displayed in the cell. The function is shown bellow. However, when I load the page, nothing is shown when I hover the mouse over the cell, although when I run that function from firebug's terminal, it starts working as supposed.
Why ideas why?
 
  

    $(document).ready(function()
        	{
        		$('#mytable td').qtip({
        			content : {
        				text : function(api){
        					return "Time spend: " + $(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-shadow'
        		});
        	});

and the HTML

    <div id="mytable">
    <table id="mytable" border="1px">
    <tbody>
    <tr>
    <td style="background-color: rgb(0, 191, 255);">1</td>
    <td style="background-color: rgb(0, 191, 255);">1</td>
    <td style="background-color: rgb(0, 191, 255);">1</td>
javascript not displaying table values html
===

I'm creating a JavaScript application that when you hover the mouse a small window pops up displaying information about the value displayed in the cell. The function is shown bellow. However, when I load the page, nothing is shown when I hover the mouse over the cell, although when I run that function from firebug's terminal, it starts working as supposed.
Why ideas why?
 
  

    $(document).ready(function()
        	{
        		$('#mytable td').qtip({
        			content : {
        				text : function(api){
        					return "Time spend: " + $(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-shadow'
        		});
        	});

and the HTML

    <div id="mytable">
    <table id="mytable" border="1px">
    <tbody>
    <tr>
    <td style="background-color: rgb(0, 191, 255);">1</td>
    <td style="background-color: rgb(0, 191, 255);">1</td>
    <td style="background-color: rgb(0, 191, 255);">1</td>