Qtip on table cell positioning

Question

I have a problem using qtip. I have a table that consists of 3 other tables (every color in the picture is one table), for fixed header and column purposes. It seems that qtip doesn't like this:

http://smiks.uni.me/Zaaikalender.jpg

As you can see, the qtip appears UNDER the table when I hover my mouse on an item. I just need a basic textbox on the hovered cell.

HTML: <

            <td>
                <div id="divHeader" style="overflow:hidden;width:975px;">
                    <table cellspacing="0" cellpadding="0" border="0" >

                            HEADER
                    </table>
                </div>
            </td>
        </tr>
        <tr>

            <td valign="top">
                <div id="firstcol" style="overflow: hidden;height:500px">
                    <table id="firstcolTable" width="200px" cellspacing="0" cellpadding="0" border="0" >

                            FIRSTCOLUMN


                    </table>
                </div>
            </td>

            <td valign="top">
                <div id="table_div" style="overflow: scroll;width:1000px;height:500px;position:relative" onscroll="fnScroll()" >
                    <table id="dataTable" width="500px" cellspacing="0" cellpadding="0" border="0" >

                            THIS IS THE TABLE THAT NEEDS QTIP! It has td's with a title

                    </table>
                </div>
            </td>
        </tr>

JAVASCRIPT

$('#dataTable td[title]').qtip({
    position: {
        my: 'top left', 
        at: 'bottom left' 
    }
});

Can anyone help?