I am struggling to get a tooltip to properly display on top of its parent element. Despite trying various combinations of z-index and overflow properties, I have not been able to achieve the desired outcome. The issue arises when hovering over the red box - the tooltip should appear on top so that it is not obscured by the parent element while also ensuring that the content does not extend beyond the boundaries, preserving the scroll functionality.
.parent {
position: relative;
float: left;
margin-left: 30px;
width: 380px;
text-align: left;
height: 380px;
overflow-x: hidden;
overflow-y: scroll;
border: 2px solid #f4f4f4;
border-radius: 2px;
}
.child-container {
text-align: center;
border-radius: 2px;
border-color: transparent;
font-weight: normal;
font-size: 12px;
width: 80%;
/* width: calc((100% - 83px) / 3);*/
margin: 20px 10px 10px 15px;
vertical-align: top;
display: inline-block;
}
.header {
padding: 10px;
background-color: #e6e6e6;
border: 1pt solid #ccc;
border-radius: 2px;
}
label {
color: #757575;
text-align: left;
line-height: 1.5;
margin-bottom: 0;
display: block;
}
.info {
border: 0;
height: 15px;
text-align: right;
position: relative;
}
.info:hover .tooltip {
display: block;
}
.img {
display: inline-block;
height: 15px;
width: 15px;
background: red;
}
.tooltip {
width: 300px;
text-align: center;
color: white;
background: #00c853;
position: absolute;
left: 50%;
z-index: 100;
padding: 5px;
font-size: 14px;
border-radius: 2px;
display: none;
top: 150%;
margin-left: -150px;
}
.tooltip.top:after {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #00c853;
content: '';
position: absolute;
left: 50%;
bottom: -10px;
margin-left: -10px;
border-top-color: transparent;
border-bottom: 10px solid #00c853;
top: -20px;
bottom: auto;
}<div class="parent">
<div class="child-container" style="display: inline-block;">
<div class="header">MY HEADER</div>
{/* More child elements here ... */}
</div>
</div>