固定標題和可滾動主體內部工具提示

Question

我擁有固定標題和可滾動主體的表格。所以tbody是

display:block; 
max-height: 200px; 
overflow-y: auto; 
overflow-x: hidden; 

我也有一個盤旋在tbody tr td內的列值之一。這些懸停創建:: after :: before之前，但他們不能顯示在tbody之外。請參閱jsfiddle以獲得可視化表示。

我該如何解決這個問題？可能嗎？

http://jsfiddle.net/7hdd8rnx/

Answer 1

這裏的問題是你的定位。您的工具提示正處於絕對位置，但相對於您的points-wrapper div。由於您的points-wrapper位於設置了溢出的tbody之內，因此它與此上下文綁定。你會想讓你的工具提示絕對定位，但相對於你的container div。看看這個片段，你就會明白。我寧願使用margin，在僞元素上使用負值，而不使用topleft來定位工具提示。

*, *:before, *:after { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
    font-size: 100%; 
 
    font: inherit; 
 
    vertical-align: baseline; 
 
} 
 

 
.outer-container { 
 
    width: 30em; 
 
} 
 
.container { 
 
    margin: 0 .2em .2em .2em; 
 
    background-color: #ffffff; 
 
    min-height: 26em; 
 
    padding: 0 0 2.2em 0; 
 
    position: relative; 
 
} 
 

 
table { 
 
    border-collapse: seperate; 
 
    border-spacing: 0; 
 
} 
 

 
caption, th, td { 
 
    text-align: left; 
 
    font-weight: normal; 
 
    float: none !important; 
 
} 
 

 
.scrollable { 
 
    width: 100% 
 
} 
 

 
.scrollable thead tr { 
 
    background-color: #f4f4f4; 
 
    display: block; 
 
} 
 

 
.scrollable thead tr th { 
 
    height: 30px; 
 
    line-height: 30px; 
 
} 
 

 
.scrollable thead tr th:first-child { 
 
    width: 100%; 
 
} 
 

 
.scrollable thead tr th:nth-child(2) { 
 
    min-width: 6em; 
 
} 
 

 
.scrollable thead tr th:nth-child(3) { 
 
    min-width: 4em; 
 
} 
 

 

 
.scrollable thead tr th { 
 
    height: 30px; 
 
    line-height: 30px; 
 
} 
 

 
.table-list th, .table-list td { 
 
    line-height: 1.8; 
 
    padding-left: .8em; 
 
} 
 

 
.table-list th:last-child, .table-list td:last-child { 
 
    padding-right: .8em; 
 
} 
 

 
.scrollable tbody, .scrollable thead { 
 
    display: block; 
 
} 
 

 
.scrollable tbody { 
 
    max-height: 200px; 
 
    overflow-y: auto; 
 
    overflow-x: overlay; 
 
} 
 

 
.table-list td { 
 
    line-height: 1.8; 
 
    padding-left: .8em; 
 
} 
 
.scrollable tbody tr td:first-child { 
 
    width: 100%; 
 
} 
 

 
.scrollable tbody tr td:nth-child(2) { 
 
    min-width: 6em; 
 
} 
 

 
.scrollable tbody tr td:nth-child(3) { 
 
    min-width: 4em; 
 
} 
 

 
table td { 
 
    vertical-align: top; 
 
} 
 

 
caption, th, td { 
 
    text-align: left; 
 
    font-weight: normal; 
 
    float: none !important; 
 
} 
 
/* below is*/ 
 
.points-wrapper { 
 
    /*position: relative;*/ 
 
} 
 

 
.points-red { 
 
    background-color: #d75f44; 
 
    border-radius: 100%; 
 
    height: 19px; 
 
    /* padding: 5px; */ 
 
    color: #fff; 
 
    font-size: 13px; 
 
    line-height: 19px; 
 
    text-align: center; 
 
    /* left: 10px; */ 
 
    /* position: absolute; */ 
 
    text-shadow: 1px 1px rgba(0, 0, 0, 0.1); 
 
    /* top: 2px; */ 
 
    width: 19px; 
 
    display: inline-block; 
 
} 
 

 
.points-inline { 
 
    top: -1px; 
 
    left: 0; 
 
} 
 

 
.points-wrapper *[data-tooltip]:hover:before, 
 
.points-wrapper *[data-tooltip]:active:before { 
 
    border-top: 6px solid #cccccc; 
 
    left: 4px; 
 
} 
 

 
.points-wrapper *[data-tooltip]:hover:after, 
 
.points-wrapper *[data-tooltip]:active:after { 
 
    background: #cccccc; 
 
    color: #000000; 
 
    left: -5px; 
 
    right: auto; 
 
} 
 

 
.tooltip-left[data-tooltip]:hover::after, 
 
.tooltip-left[data-tooltip]:active::after { 
 
    left: auto; 
 
    right: -5px; 
 
} 
 

 
*[data-tooltip]:hover:before, *[data-tooltip]:active:before { 
 
    content: ""; 
 
    position: absolute; 
 
    /* top: 20px; */ 
 
    /* left: 500px; */ 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 6px solid transparent; 
 
    border-right: 6px solid transparent; 
 
    border-top: 6px solid #af241c; 
 
    margin: -8px 0 0 404px; 
 
} 
 

 
*[data-tooltip]:hover:after, *[data-tooltip]:active:after { 
 
    content: attr(data-tooltip); 
 
    padding: 2px 10px; 
 
    position: absolute; 
 
    /* top: -35px; */ 
 
    /* right: -20px; */ 
 
    background: #af241c; 
 
    color: #FFF; 
 
    text-align: right; 
 
    text-indent: 0; 
 
    line-height: 25px; 
 
    white-space: nowrap; 
 
    word-wrap: normal; 
 
    -webkit-border-radius: 2px; 
 
    -moz-border-radius: 2px; 
 
    border-radius: 2px; 
 
    z-index: 9999; 
 
    font-weight: normal; 
 
    margin: -36px 48px 0 0; 
 
}

<div class="outer-container"> 
 
    <div class="container"> 
 
     <table class="table-list scrollable"> 
 
      
 
      <thead> 
 
       <tr> 
 
        <th>Hover the value</th> 
 
        <th>Second</th> 
 
        <th>Value</th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       
 
       
 
       <tr> 
 
        <td>Value hover cant be shown</td> 
 
        <td>2015-01-01</td> 
 
        <td><div class="points-wrapper"> 
 
         <span class="points-red tooltip-left" data-tooltip="Here is the hover tests">5</span> 
 
         </div></td> 
 
       </tr> 
 
       
 
       <tr> 
 
        <td>Value hover is barely shown</td> 
 
        <td>2015-01-01</td> 
 
        <td><div class="points-wrapper"> 
 
         <span class="points-red tooltip-left" data-tooltip="Here is the hover tests">5</span> 
 
         </div></td> 
 
       </tr> 
 
       
 
       
 
       <tr> 
 
        <td>The value hover below this row is shown</td> 
 
        <td>2015-01-01</td> 
 
        <td>5</td> 
 
       </tr> 
 
       
 
       
 
       <tr> 
 
        <td>Something is named</td> 
 
        <td>2015-01-01</td> 
 
        <td>2</td> 
 
       </tr> 
 
       
 
       
 
       <tr> 
 
        <td>Some long long long name</td> 
 
        <td>2015-01-01</td> 
 
        <td><div class="points-wrapper"> 
 
         <span class="points-red tooltip-left" data-tooltip="Here is the hover tests">5</span> 
 
         </div></td> 
 
       </tr> 
 
       
 
       <tr> 
 
        <td>Some long long long name</td> 
 
        <td>2015-01-01</td> 
 
        <td><div class="points-wrapper"> 
 
         <span class="points-red tooltip-left" data-tooltip="Here is the hover tests">5</span> 
 
         </div></td> 
 
       </tr> 
 
       <tr> 
 
        <td>Some long long long name</td> 
 
        <td>2015-01-01</td> 
 
        <td><div class="points-wrapper"> 
 
         <span class="points-red tooltip-left" data-tooltip="Here is the hover tests">5</span> 
 
         </div></td> 
 
       </tr> 
 
       <tr> 
 
        <td>Some long long long name</td> 
 
        <td>2015-01-01</td> 
 
        <td><div class="points-wrapper"> 
 
         <span class="points-red tooltip-left" data-tooltip="Here is the hover tests">5</span> 
 
         </div></td> 
 
       </tr> <tr> 
 
       <td>Some long long long name</td> 
 
       <td>2015-01-01</td> 
 
       <td><div class="points-wrapper"> 
 
        <span class="points-red tooltip-left" data-tooltip="Here is the hover tests">5</span> 
 
        </div></td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div