Tooltip inside table with fixed header and scrollable body
I have a table with a fixed title and a scrollable body. So your
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 hangs create :: after :: before, but they cannot appear outside of the body. See the Jsfiddle for a visual presentation.
How can I fix this? Is it possible?
+3
source to share
1 answer
The problem here is your positioning. Your tooltip is at absolute position, but relative to your points-wrapper
div. Since yours points-wrapper
is inside tbody
that has an overflow set for it, it is associated with that context. You want to make your tooltip an absolute position, but relative to your container
div. Check out the snippet and you get the idea. I have rather used margin
with negative values for pseudo-elements than top
left
to place a 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
+2
source to share