我有一个固定标题和可滚动体的表.所以有人

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

我还将鼠标悬停在tbody tr td中的一个列值上.这些悬停创建一个:: after :: before但它们不能显示在tbody之外.请参阅jsfiddle以获取可视化表示.

我怎样才能解决这个问题？可能吗？

http://jsfiddle.net/7hdd8rnx/

最佳答案 这里的问题是你的定位.您的工具提示是绝对定位的,但相对于您的point-wrapper div.由于你的点包装器位于设置了溢出的tbody内部,因此它被绑定到这个上下文.您需要使工具提示绝对定位,但相对于容器div.看看片段,你就会明白这个想法.我宁愿使用伪元素上的负值而不是左上角来定位工具提示.

*, *: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