Show tool tip relative with parent element using CSS - css

Question

I need help to show the tool tip relatively with parent element. Refer screen 1 it's show the description is perfect screen 1. But screen 2 Screen 2 when i scroll the section description show the same place but i need relative
<div class="item" data-key="15" data-value="244937">
<input class="option" id="treemultiselect-0-15" type="checkbox">
<span class="description">
<label class="" for="treemultiselect-0-15">Ashram</label>
</span>
<div class="temp-description-popup" style="position: absolute;">
No. & Listing of <b>Ashrams</b><br>
</div>
</div>

Answer 1

I think you're looking for something like this, right?
It's better you create a snippet & re-create your issue, so everyone can catch the idea & help you out.
The problem is that you set the element position: absolute, so it just keep the position based on its relative parent. Scrolling won't move it.
This example will help you better in understanding how position works https://codepen.io/AlHakem/pen/YayxBo
.scroller {
max-height: 150px;
overflow-y: scroll;
height: 150px;
float: left;
width: 200px;
}
.item {
position: relative;
}
.temp-description-popup {
visibility: hidden;
height: 0px;
}
.item:hover>.temp-description-popup {
visibility: visible;
height: auto;
padding: 4px;
background-color: #f1f1f1;
border-radius: 4px;
position: absolute;
top: 25px;
z-indeX: 2;
}
<div class="scroller">
<div class="item" data-key="15" data-value="244937">
<input class="option" id="treemultiselect-0-15" type="checkbox">
<span class="description">
<label class="" for="treemultiselect-0-15">Ashram</label>
</span>
<div class="temp-description-popup">
No. & Listing of <b>Ashrams</b><br>
</div>
</div>
<div class="item" data-key="15" data-value="244937">
<input class="option" id="treemultiselect-0-15" type="checkbox">
<span class="description">
<label class="" for="treemultiselect-0-15">Ashram</label>
</span>
<div class="temp-description-popup">
No. & Listing of <b>Ashrams</b><br>
</div>
</div>
<div class="item" data-key="15" data-value="244937">
<input class="option" id="treemultiselect-0-15" type="checkbox">
<span class="description">
<label class="" for="treemultiselect-0-15">Ashram</label>
</span>
<div class="temp-description-popup">
No. & Listing of <b>Ashrams</b><br>
</div>
</div>
<div class="item" data-key="15" data-value="244937">
<input class="option" id="treemultiselect-0-15" type="checkbox">
<span class="description">
<label class="" for="treemultiselect-0-15">Ashram</label>
</span>
<div class="temp-description-popup">
No. & Listing of <b>Ashrams</b><br>
</div>
</div>
<div class="item" data-key="15" data-value="244937">
<input class="option" id="treemultiselect-0-15" type="checkbox">
<span class="description">
<label class="" for="treemultiselect-0-15">Ashram</label>
</span>
<div class="temp-description-popup">
No. & Listing of <b>Ashrams</b><br>
</div>
</div>
<div class="item" data-key="15" data-value="244937">
<input class="option" id="treemultiselect-0-15" type="checkbox">
<span class="description">
<label class="" for="treemultiselect-0-15">Ashram</label>
</span>
<div class="temp-description-popup">
No. & Listing of <b>Ashrams</b><br>
</div>
</div>
</div>