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个问题

工具提示被切断。（在divs滚动条下）
发生了一个不需要的溢出-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;
}

CSS ToolTip被垂直滚动条切断。

1 个答案: