gpt4 book ai didi

javascript - 需要修复 Chrome 和 IE 中的 Tooltip Position

转载 作者:太空宇宙 更新时间:2023-11-04 15:29:10 24 4
gpt4 key购买 nike

我在十字图标的顶部显示了工具提示窗口...它在 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>

最佳答案

绝对定位元素根据最近的有定位上下文的父元素定位,如果没有则根据body自身定位。

由于您想相对于悬停的 td 定位工具提示,因此需要将 position:relative 添加到 td 并稍微更改您的 js:

td{
position: relative;
}​

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

See HERE.

这并不完美,但它是您需要的方向。

关于javascript - 需要修复 Chrome 和 IE 中的 Tooltip Position,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13624841/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com