在视口中保留绝对定位的元素（jquery）

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

我知道有工具提示插件，但它们对我不起作用，因为工具提示是通过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专家，可能是上面的问题有问题，我还没有尝试过，但你明白了。但这有意义吗？它是否会影响性能（以一种糟糕的方式）

---

我花了好几个小时在这上面，结果却空了。非常感谢您的任何想法

你的问题有一个简单得多的解决方案。您可以使用

位置：固定根据视口定位元素。据我所知，它只会在InternetExplorer7中失败，所以如果您关心这个问题，您需要使用IE7技巧来模拟固定定位。而且，
*
选择器和您在那里所做的工作无疑会影响性能。
是阅读CSS和JS评测的好地方。注意，它非常详细，但绝对值得一读。
我检查了一下，发现它们正按照您提到的方式定位工具提示。你可以检查一下样品

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

<a href="#" class="see-tooltip" title="Title-1" content="Content-1">Hover Me!</a>

我不能改变工具提示的工作方式——也就是说我不能改变代码结构——大部分工具提示是从数据库动态加载的，要获得它们需要很长时间。我所能做的就是更改css代码。我不关心IE7，但我仍然不明白固定定位会有什么帮助-我不希望所有的工具提示都在某个位置，它们必须显示在悬停的元素附近-所以我仍然需要一些js来运行任何一种方式
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
);