私は、次のCSSCSSツールヒントが垂直スクロールバーで切り取られています。
/* 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つの問題
- ツールチップが切断されますがあります。 (divスクロールバーの下にあります)
- ツールチップを持つスパンに対応するために、不要なオーバーフローxが発生します。
例フィドル:http://jsfiddle.net/naveen/2ur3Q/
がどのように私はこれを修正するだろうか?
ツールチップを移動する必要があります含まれているdivの外側では、残念なことに親コンテナ内からツールチップの 'z-index'をオーバーライドすることはできません。 – Kyle
は、JavaScriptの代替ですか?私は私のサイトの多くの場所でこのCSSを使用して、私は一般的なソリューションを持っていると思います。 – naveen
JSの選択肢はたくさんあります。私の好きなものはFlowplayerのものです。ここで見つけることができます。 http://flowplayer.org/tools/demos/tooltip/index.html – Kyle