Apologies in advance for my lack of experience with coding more complex website features.
I'm attempting to incorporate a tooltip popup into one of the header cells to provide additional information to users.
While I have all the necessary components, I am struggling to seamlessly integrate the existing table code with the tooltip function.
HTML:
<div>
<table id="lst-table">
<thead>
<tr>
<th class="lst-th" scope="col">Model <br>Ref.</th>
<th class="lst-th" scope="col">Perf <br>Type</th>
<th class="lst-th" scope="col">LST Cover <br>Length</th>
<th class="lst-th" scope="col">LST Cover <br>Colour</th>
<th class="lst-th" scope="col">Mounting <br>Type</th>
<th class="lst-th" scope="col">TRV <br>Aperature</th>
<th class="lst-th" scope="col">Healthcare</th>
<th class="lst-th" scope="col">Sloped <br>Top</th>
<th class="lst-th" scope="col">Quantity</th>
<th class="lst-th" scope="col">Order <br>Code</th>
</tr>
</thead>
</table>
</div>
<br><br><div class="tooltip-lst">ⓘ
<span class="tooltiptext">Is an aperature required to accommodate a Thermostatic Radiator Valve (TRV). TRV supplied by others.</span></div>
CSS (tool tip css code is final three paragraphs):
.lst-table{
text-align: right;
position: relative;
border-collapse: collapse;
background-color: #7F7753;
}
.lst-td, th {
border: 1px solid #999;
padding: 10px;
}
.lst-th {
background: #7F7753;
color: white;
border-radius: 0;
position: sticky;
top: 0;
padding: 10px;
}
.lst-input-ral-box {
border: 1px solid #d7d6d6;
display: flex;
gap: 0;
width:85px;
}
.lst-input-ral-box:focus-within {
border: 0px solid #000;
}
input {
border: none;
outline: none;
}
.tooltip-lst {
position: relative;
display: inline-block;
}
.tooltip-lst .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip-lst:hover .tooltiptext {
visibility: visible;
}
Any assistance with this issue would be highly appreciated.