I以下のツールチップを持っている:表示要素
#left_div {
max-height:170px;
overflow-x:hidden;
overflow-y:scroll;
}
a.tditems_tooltip {
position: relative;
display: inline-block;
text-decoration:none;
}
a.tditems_tooltip span {
position: absolute;
max-width:400px;
color:#FFFFFF;
line-height:16px;
padding:0;
background:url('/layouts/background.gif');
border: 1px solid #CFB57C;
text-align: center;
display: none;
text-decoration:none;
font-size: 12px;
box-shadow: 0 1px 4px #AAAAAA;
}
a.tditems_tooltip span:after {
content: '';
position: absolute;
top: 100%;
left: 0%;
margin-left: 150px;
max-width:800px;
text-decoration:none;
}
a:hover.tditems_tooltip span {
display: inline-block;
bottom: 100%;
left: 0%;
margin-left: -3px;
z-index: 1000;
text-decoration:none;
}
<table border="0" cellspacing="1" cellpadding="1" width="400" height="300">
<tr>
<td width="50%">
<div id="left_div">
</br>
</br>
</br>
</br>
<a class="tditems_tooltip">
<font color="red">TRIGGER</font>
<span>
<table border="0" cellspacing="0" cellpadding="1" width="300">
<tr bgcolor="green">
<td>CONTENT OF TOOLTIP</td>
</tr>
</table>
</span>
</a>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</br>
</div>
</td>
<td width="50%">INSIGNIFICANT CONTENT</td>
</tr>
</table>
そして、これまでのところそれは私がするつもり何にほぼ完璧に取り組んでいます。 .. 1つの事を除いて:ツールチップ(span
)はページの他のすべての要素の上に表示されず、その背後に表示されます。上のスニペットをチェックアウトしてください。
注:私はCSS
overflow-x
とtd
からoverflow-y
から削除するとは、それが意図した方法を示していますが、私はまだそのtd
からmax-height
を指定する必要があります...
アイデア?
は、あなたが何をする必要があるかですが、あなたはまだ、最大の高さを指定する必要が何を意味するのですか?あなたの現在の最大高さと高さは無視されています。なぜなら、それらの値が無効であるからです。 –
@MichaelCokerごめんなさい、今すぐスニペットを実行できますか? –
私はそれが変わったのを見ますが、その振る舞いはまだ同じように見えます。要素から 'オーバーフロー(overflow) 'を削除すると、要素が修正されます。 'overflow'が定義されているかどうかにかかわらず、' max-height'の動作は同じように見えます。オーバーフローを取り除くだけで何が問題になっていますか? –