滚动 div 内的 CSS 工具提示

Question

我有一个简单的 CSS 帮助弹出窗口，它在大多数简单的布局中都运行良好。但现在它需要在滚动 div 内工作。

给出示例 HTML：

<div style="overflow:scroll; width:80px">
<a href="#" class="tooltip">
an image
<span>some hidden tooltip which is a bit longer in here</span>
</a>
</div>

（注意：在现实世界中，滚动 div 内会有多个带有工具提示的内容）

我有CSS：

a.tooltip span 
{
display:none;
position:absolute;
padding:0px 0px 2px 2px;
background:yellow; 
text-decoration:none;
vertical-align:top;
}

a.tooltip:hover span
{
display:inline; 
position:absolute;
padding:0px 0px 2px 2px;
top:0;
left:18px;
background:yellow; 
text-decoration:none;
vertical-align:top;
z-index:5;
}

a.tooltip 
{
border-width:0px; 
text-decoration:none;
}

a.tooltip:hover
{
border-width:0px; 
text-decoration:none;
position:relative;
}

是否可以让弹出窗口从滚动 div 中弹出，以便在不导致 div 滚动的情况下可读？

不使用 javascript，仅用 CSS 可以实现这一点吗？

编辑：由Kyle Sevenoaks提供的实时示例。

Answer 1

我认为这是不可能的，因为 z 索引是从父元素开始工作的，子元素将无法显示顶部的跨度。这个 CSS 工具提示只是在鼠标悬停时添加另一个元素<a>。我认为你可能必须走 jQuery 路线。

另外，尝试发布您的问题的实时示例，而不是一长串 HTML 和 CSS，这样我们可以更轻松地为您提供帮助:)