我在十字图标的顶部显示了工具提示窗口......它在firefox中正常工作。但Chrome和IE浏览器中的工具提示位置正确...
这里是demo： - 请用chrom或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>
答案 0 :(得分：1)
绝对定位元素根据最近的父元素和定位上下文定位，如果没有，它将根据主体定位自己。
由于您想要相对于悬停的td定位工具提示，您需要将position:relative添加到td并稍微更改您的js：
td{
position: relative;
}
$(".tip_trigger").hover(function () {
tip = $(this).find('.tip');
tip.css('top','-40px').show(); //Show tooltip
}
这不是完美的，但它是你需要的方向。