I have a table with fixed header and a scrollable body. So tbody is
display:block;
max-height: 200px;
overflow-y: auto;
overflow-x: hidden;
I also have a hover over one of the column values inside the tbody tr td. These hover create an ::after ::before but they cant be displayed outside the tbody. See jsfiddle for visual representation.
How can I fix this? Is it possible?
The problem here is your positioning. Your tooltip is being absolute positioned, but relative to your points-wrapper div. Since your points-wrapper is inside the tbody which has an overflow set to it, it is bound to this context. You will want to make your tooltip absolute positioned, but relative to your container div. Check out the snippet and you will get the idea. I've rather used margin with negative values on the pseudo elements than top left to position the tooltip.
*, *: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