我现在正在开发一个带有很多工具提示的网站。我想确保工具提示始终完全显示在视口中。
我知道有工具提示插件，但它们对我不起作用，因为工具提示是通过 css 完成的（而且我不能全部更改！）。任何想要获得工具提示的元素都会被赋予一个position:relative，并且紧接着是一个class='tooltip'的元素 - 这是CSS代码：
.tooltip{
display:none;
color: #262626;
background-color: #FEFEE0;
padding: 5px 12px;
position: absolute;
box-shadow: 0 0 5px #A6A6A6;
margin-top:-8px;
z-index: 1000;
}
*:hover + .tooltip {
display:block ! important;
}
.tooltip:hover{
display:block;
}
我想做的是，每次显示工具提示时（或每次悬停工具提示之前的元素时），运行一个函数来计算偏移量并确保它适合屏幕（或者移动它，如果不适合） 。
我现在唯一能想到的、我还没有尝试过的事情就是运行类似的东西：
$("*:hover").each(function(e){
if ($(this).next().hasClass('tooltip')
//run some positioning function
}
好吧，我不是 jquery 专家，可能上面的内容有问题，我还没有尝试过，但你明白了。但这有意义吗？它会影响性能（以不好的方式）吗？
我花了好几个小时研究这个，却一无所获。任何想法都非常感谢！
对于您的问题，有一个更简单的解决方案。您可以使用position:fixed;根据视口定位元素。据我所知，它只会在 Internet Explorer 7 中失败，所以如果你关心这个，你需要使用 IE7 技巧来模拟固定定位。还，*选择器以及您在那里所做的事情无疑会影响性能。This http://perfectionkills.com/是阅读 CSS 和 JS 分析的好地方。请注意，它非常详细，但绝对值得一读。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
