need to fix the Tooltip Position in Chrome and IE

Question

I have displayed tooltip window on the top the cross icon... Its working fine in the firefox. but Tooltip Position is coming correct in Chrome and IE browser...

here is the demo:- Please open it in chrom or IE...

$(document).ready(function () {
        //Tooltips
        $(".tip_trigger").hover(function () {
               tip = $(this).find('.tip');
               tip.show(); //Show tooltip
        }, function () {
               tip.hide(); //Hide tooltip          
        })

});​

.tblRpt td{ padding:4px; color:#777;}
.tblServerInfo{border-collapse: collapse; font-size:13px; margin-top:10px;}
.tblServerInfo th{ background:#ececec; border:1px solid #ccc; padding:4px; text-shadow: 1px 1px 0px #fff; color:#666;border-collapse: collapse; line-height:30px; }
.tblServerInfo td{ border:1px solid #ccc; line-height:20px; padding:4px; text-shadow: 1px 1px 0px #fff; color:#666;border-collapse: collapse; text-align:center; }    
.tblServerInfo .feature{ color:#333; font-size:14px;  line-height:30px;  font-weight:bold; padding-left:10px; text-align:left; text-shadow: 1px 1px 0px #fff;}
.tblServerInfo .featureBody{ color:#333; font-size:13px;  line-height:25px;  padding-left:10px; text-align:left; }
.tblServerInfo .rw{background:#f5f5f5;}


/*--Tooltip Styles--*/
.tip_trigger{display:block; padding:6px;}
.tip {
    color: #333;
    background:#ffffff;
    border:1px solid #747474;
    display:none; /*--Hides by default--*/
    padding:10px;
    margin-left:-143px;

    text-align:left; line-height:16px;
    position:absolute;    z-index:1000;
    text-decoration:none;
    cursor:auto;
    -moz-box-shadow: 2px 2px 5px #a2a2a2;-webkit-box-shadow: 2px 2px 5px #a2a2a2;box-shadow: 2px 2px 5px #a2a2a2;
}    
.tblScroll
{ 
    width: 85%;
    overflow:auto;  
    padding-bottom:1px;
}    ​


<div class="tblScroll fLeft">
                    <table class="tblServerInfo">
                       <tbody>
                        <tr style="background:#f5f5f5; line-height:40px; height:39px;">
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr class="rw">
                            <td></td>
                            <td><<img src="http://cdn-img.easyicon.cn/png/5249/524975.png" /></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                        </tr>
                        <tr>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                        </tr>
                        <tr class="rw">
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                        </tr>
                        <tr class="rw">
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                        </tr>
                        <tr class="rw">
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="images/cross-icon.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="images/cross-icon.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="images/cross-icon.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>
                            <td></td>
                            <td>
                            <a class="tip_trigger"><img src="http://cdn-img.easyicon.cn/png/5249/524975.png" />
                            <span class="tip" style="width: 250px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet enim...</span>
                            </a>
                            </td>

                        </tr>

                       </tbody>
                    </table>
                    </div>

Answer 1

Absolute positioned elements are positioned according to the nearest parent with positioning context, and if there is none, it will position itself according to the body.

Since you want to position the tooltip relative to the td that was hovered, you need to add position:relative to the td and change your js a bit:

td{
 position: relative;   
}​

 $(".tip_trigger").hover(function () {
                    tip = $(this).find('.tip');
                    tip.css('top','-40px').show(); //Show tooltip
                }

See HERE.

This is not perfect but its the direction you need.