Question

我正在使用大量工具提示在网站上工作。我想确保工具提示始终完全显示在视口中。

我知道工具提示有插件，但它们对我不起作用，因为工具提示是通过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").each(function(e){
  if ($(this).next().hasClass('tooltip')
    //run some positioning function
}

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

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

Answer 1

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

Answer 2

我检查了tooltipsy plugin并看到他们按照你提到的方式定位工具提示。您可以查看示例here。

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

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

将悬停事件分配给'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
);

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

2 个答案: