표시 요소

Question

나는 다음과 같은 도구 설명이 있습니다

#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>

그리고 지금까지 그것은 내가 의도와 무엇을 거의 완벽하게 작동한다. .. 한 가지를 제외하고는 : 툴팁 (span)은 페이지의 다른 모든 요소의 맨 위에 표시되지 않고 그 뒤에 표시됩니다. 위의 스 니펫을 확인하십시오.

참고 : 나는 CSSoverflow-x과 td에서 overflow-y에서 제거 할 때가 의도하는 방법을 보여줍니다,하지만 난 아직도 그 td에 max-height를 지정해야합니다 ...

아이디어가 있으십니까?

Answer 1

position: fixed;을 자식 요소에 추가하면 DOM 요소에서 해당 요소의 부모 흐름에서 제거되므로 자식 요소는 부모 요소의 모든 overflow 속성을 무시합니다.

툴팁이 포함 된 테이블에 고정 위치 지정을 지정하면 부모의 오버플로 속성 외부에서 해당 요소가 강제로 배치되지만 절대적으로 배치 된 스팬 요소 내에서 자체 위치가 다르기 때문에 transform: translateY(-100%);을 적용하여 예. 원하는대로 작동하도록 요소의 레이아웃을 다시 작업해야 할 수도 있습니다. 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>