在视口中保持一个绝对定位的元素（jquery）

我现在正在一个网站上工作，有很多工具提示。 我想确保工具提示始终在视口中完全显示。

我知道有工具提示的插件，但它们不适合我，因为工具提示是通过css完成的（我不能改变所有这些！）。 你想获得工具提示的任何元素都有一个位置：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），运行一个函数来计算偏移并确保它适合屏幕（或移动它，如果没有） 。

我现在唯一想到的就是我没有尝试过这样的事情：

 $("*:hover").each(function(e){ if ($(this).next().hasClass('tooltip') //run some positioning function } 

好吧，所以我不是jquery专家，可能是上面的马车，我还没试过，但你明白了。 但它有意义吗？ 它会影响性能（以不好的方式）吗？

我花了好几个小时研究这个并且空洞。 任何想法非常感谢！

Answer 1

对您的问题有一个更简单的解决方案。 你可以使用position:fixed; 根据视口定位元素。 据我所知，它只会在Internet Explorer 7中失败，因此如果您关心这一点，则需要使用IE7技巧来模拟固定定位。 此外， *选择器以及您在那里所做的事情无疑会对性能产生影响。 这是阅读CSS和JS分析的好地方。 要注意，它详尽无遗，但绝对值得一读。

Answer 2

我检查了tooltipsy插件 ，看到他们按照你提到的方式定位工具提示。 你可以在这里查看样品。

为工具提示定义html元素类型并监听其hover事件，而不是监听所有元素。 因此，您可以在每个元素中设置标题内容数据，而不是为所有可能的数据创建工具提示元素。

 Hover Me! 

并将hover事件分配给’show-tooltip’类。

 var $tooltip = $('#tooltip'); //select the early created tooltip element here $('a.show-tooltip').hover(function() { var title = $(this).attr('title'); var content = $(this).attr('content'); //set title and content to $tooltip here //calculate and set positioning here $tooltip.show(); //show tooltip after setting it's new position }, function() { $tooltip.hide(); //hide tooltip when hover ends );