javascript不显示表格值html

Question

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>

This is just a sample of the table. The table itself is huge (a heatmap)

Answer 1

Please add overwrite and show properties to it and see if it works.

For example:

$(this).qtip({
      overwrite: false, // make sure it can't be overwritten
      content: 'bla bla bla'
      show: {
         ready: true // make sure it show on first mouseover
      }
   })