2017-01-09 43 views
0

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)はページの他のすべての要素の上に表示されず、その背後に表示されます。上のスニペットをチェックアウトしてください。

注:私はCSSoverflow-xtdからoverflow-yから削除するとは、それが意図した方法を示していますが、私はまだそのtdからmax-heightを指定する必要があります...

アイデア?

+0

は、あなたが何をする必要があるかですが、あなたはまだ、最大の高さを指定する必要が何を意味するのですか?あなたの現在の最大高さと高さは無視されています。なぜなら、それらの値が無効であるからです。 –

+0

@MichaelCokerごめんなさい、今すぐスニペットを実行できますか? –

+0

私はそれが変わったのを見ますが、その振る舞いはまだ同じように見えます。要素から 'オーバーフロー(overflow) 'を削除すると、要素が修正されます。 'overflow'が定義されているかどうかにかかわらず、' max-height'の動作は同じように見えます。オーバーフローを取り除くだけで何が問題になっていますか? –

答えて

0

子要素にposition: fixed;を追加すると、DOM要素内のその要素の親のフローから削除されるので、子要素は親要素の任意のoverflowプロパティを無視します。

ツールヒントを含むテーブルに固定の配置を割り当てると、その要素が親のオーバーフロープロパティの外にあるように強制されているように見えますが、絶対配置されたスパン要素内に異なる位置に配置されるため、transform: translateY(-100%);を適用して例。それらの要素のレイアウトを再作成して、元のように機能させる必要があるかもしれません。 (ところで、私は追加のスタイルがa.tditems_tooltip span > table下にある)tdからオーバーフローを削除

#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; 
 
} 
 
a.tditems_tooltip span > table { 
 
    position: fixed; 
 
    transform: translateY(-100%); 
 
}
<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>

+0

あなたはロックします!ありがとうございます –

+0

@ VictorYugo \ m/\ m /あなたを大歓迎です! –

関連する問題