CSS ToolTip 被垂直滚动条截断。

Question

我有一个包含以下 CSS 的简单工具提示

/* tooltip for buttons */
a.tooltip{position:relative; z-index:24;text-decoration:none}
a.tooltip:hover{z-index:25;}
a.tooltip span{display: none}
a.tooltip:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:1.1em; left:1.1em; width:10em;
    border:1px solid #6e7044;
    background-color:#feffe1; color:#6e7044;
    text-align: center}

这在正常情况下适用于我。

但如果我有一个预定义高度和overflow-y:auto; 的 div，我有 2 个问题

1. 工具提示被截断。 （在 div 滚动条下方）
2. 发生了一个不需要的溢出-x 以适应具有工具提示的跨度。

小提琴示例：http://jsfiddle.net/naveen/2ur3Q/

我该如何纠正这个问题？

Answer 1

为了使您现有的解决方案保持最小的更改，您可能想尝试这个 JavaScript 解决方案 - http://jsfiddle.net/8yeDy/

只需从标记中删除所有span-s，附加一些JS

$('a').mouseover(function() {
     $(this).parent().append('<span>Eliminate(Delete)</span>');
 }).mouseleave(function() {
     $(this).siblings('span').remove();
 })

以及对 CSS 的一些更改（跨度不再位于 <a> 中 - 仅靠它自己）

span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
        left:10.8em; width:10em;
    border:1px solid #6e7044;
    background-color:#feffe1; color:#6e7044;
    text-align: center;
    margin-top:-1.8em;
}