17

请参阅以下帖子以获取突出显示我的问题和潜在解决方案的图片：

CSS 溢出-y：可见，溢出-x：滚动

但是，当您实际移动滚动条时，此策略会中断。在建议的实现 ( position: fixed;) 中，工具提示显示在其预滚动位置的子 div 旁边。因此，当您将新的子 div 滚动到视图中时，工具提示开始从页面底部脱落。

请参阅此处以获取该错误的演示：http: //jsfiddle.net/narcV/4/

有什么想法可以让工具提示始终显示在子 div 旁边吗？

4

1 回答 1

1

我最终使用 javascript 实现了这个，使用了这个问题getPos中的函数。

最终产品如下所示：

var scrollPanel = ...;
var tooltip = ...;
function nodeHovered(e) {
   var hovered = e.srcElement;
   var pos = getPos(hovered);
   pos.x += hovered.offsetWidth;
   pos.y -= scrollPanel.scrollTop;
   tooltip.style.setProperty('left', pos.x);
   tooltip.style.setProperty('top', pos.y);
}

基本上，我计算节点当前在页面上的显示位置（考虑到滚动条的位置），然后手动将工具提示放置在页面上的正确位置。

太糟糕了，没有优雅的/CSS方式来做到这一点，但至少这是可行的。

于 2012-04-11T18:19:41.123 回答