Stack order of hover element - html

Question

I am trying to create a hover element that displays a table of data.
I am having trouble making the hover element stack above the main table.
I have tried several things, including fixing the position and adjusting the z-index but everything seems to break the formatting and position of the hover element (i.e it needs to be positioned relative to the text that is hovered over and needs to adjust in width and height).
Example: https://jsfiddle.net/f1hLrwvf/
span.own3 {
background: #FFFFFF;
opacity: 1;
border: 1px solid #DCDCDC;
color: #000000;
font-size: 12px;
height: auto;
width: auto;
min-width: 300px;
letter-spacing: 1px;
line-height: 14px;
position: absolute;
text-align: justify;
top: 20px;
left: 0px;
display: none;
padding: 2px 5px;
font-family: "Helvetica Neue", Arial, sans-serif;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.09);
}
hover.own2 {
position: relative;
}
hover.own2:hover span {
display: block;
}
.table.hoverstatus>tbody>tr:first-child>th {
border: none;
}
<div style="padding:15px;">
<div class="shadow p-3 mb-5 bg-white rounded table-responsive" style="border: 1px solid #F0F0F0;font-family: 'Poppins', sans-serif;font-size:14px;">
<table id="example" class="table table-striped" width="100%">
<thead>
<tr>
<th>Feeling</th>
<th>Day</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Super
</td>
<td>1</td>
</tr>
<tr>
<td>
<hover class="own2">Great<span class="own3"><table class="table hoverstatus" id="innertable"><tr><th>Row1 Col1</th><th>Row1 Col2</th><th>Row1 Col3</th></tr><tr><td>Row2 Col1</td><td>Row2 Col2</td><td>Row2 Col3</td></tr></table></span></hover>
</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</div>
Any guidance is greatly appreciated.

Answer 1

use position: absolute; instead position: relative;
Try code below:
span.own3 {
background: #FFFFFF;
opacity: 1;
border: 1px solid #DCDCDC;
color: #000000;
font-size: 12px;
height: auto;
width: auto;
min-width: 300px;
letter-spacing: 1px;
line-height: 14px;
position: absolute;
text-align: justify;
top: 20px;
left: 0px;
display: none;
padding: 2px 5px;
font-family: "Helvetica Neue", Arial, sans-serif;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.09);
}
hover.own2 {
position: absolute;
}
hover.own2:hover span {
display: block;
}
.table.hoverstatus>tbody>tr:first-child>th {
border: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div style="padding:15px;">
<div class="shadow p-3 mb-5 bg-white rounded table-responsive" style="border: 1px solid #F0F0F0;font-family: 'Poppins', sans-serif;font-size:14px;">
<table id="example" class="table table-striped" width="100%">
<thead>
<tr>
<th>Feeling</th>
<th>Day</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Super
</td>
<td>1</td>
</tr>
<tr>
<td>
<hover class="own2">Great<span class="own3"><table class="table hoverstatus" id="innertable"><tr><th>Row1 Col1</th><th>Row1 Col2</th><th>Row1 Col3</th></tr><tr><td>Row2 Col1</td><td>Row2 Col2</td><td>Row2 Col3</td></tr></table></span></hover>
</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 2

You need to change some html markup as well as css
span.own3 {
background: #FFFFFF;
opacity: 1;
border: 1px solid #DCDCDC;
color: #000000;
font-size: 12px;
height: auto;
width: auto;
min-width: 300px;
letter-spacing: 1px;
line-height: 14px;
position: absolute;
text-align: justify;
top: 100%; // Changed to percentage instead of px
left: 0px;
display: none;
padding: 2px 5px;
font-family: "Helvetica Neue", Arial, sans-serif;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.09);
}
hover.own2 {
position: relative;
}
hover.own2:hover span {
display: block;
}
.table.hoverstatus>tbody>tr:first-child>th {
border: none;
}
.dd-label {
padding: 10px 0;
display: inline-block;
}
<div style="padding:15px;">
<div class="shadow p-3 mb-5 bg-white rounded table-responsive" style="border: 1px solid #F0F0F0;font-family: 'Poppins', sans-serif;font-size:14px;">
<table id="example" class="table table-striped" width="100%">
<thead>
<tr>
<th>Feeling</th>
<th>Day</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Super
</td>
<td>1</td>
</tr>
<tr>
<td>
<hover class="own2">
<!-- wrap this label in a span tag -->
<span class="dd-label">Great</span>
<!-- span tag ends -->
<span class="own3"><table class="table hoverstatus" id="innertable"><tr><th>Row1 Col1</th><th>Row1 Col2</th><th>Row1 Col3</th></tr><tr><td>Row2 Col1</td><td>Row2 Col2</td><td>Row2 Col3</td></tr></table></span></hover>
</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>
</div>
Working fiddle here
Hope it will help you :)