4

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

我知道有用于工具提示的插件，但它们对我不起作用，因为工具提示是通过 css 完成的（而且我不能全部更改！）。您想要获得工具提示的任何元素都被赋予一个位置：相对，并且紧随其后的是一个带有 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 专家，可能是上面的错误，我还没有尝试过，但你明白了。但这有意义吗？它会影响性能（以一种糟糕的方式）吗？

我已经花了好几个小时在这上面工作，结果却一无所获。任何想法都非常感谢！

4

2 回答 2

1

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

于 2012-12-03T09:42:23.270 回答
1

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

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

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

并将悬停事件分配给“显示工具提示”类。

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
);
于 2012-12-03T11:43:49.730 回答