CSSツールヒントが垂直スクロールバーで切り取られています。

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のソリューションをしようとする場合があり、最小限の変更で、既存のソリューション保つために - いくつかのJS

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

といくつかを添付し、ただ、マークアップからすべてのspan -sを削除http://jsfiddle.net/8yeDy/

を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; 
}