I am trying to add div element inside the th element using jquery but I ain't able to append it.
How do I add div when there is multiple class inside the th element. I have also tried append by table thead tr th .col_heading.level0.col0
but it didn't work. I don't know why it's failing.
$('.col_heading.level0.col2').prepend('<div class="tooltiptext">This is it.</div>')
.col_heading.level0.col2 {
position: relative;
display: inline-block;
}
.col_heading.level0.col2 .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;
}
.col_heading.level0.col2:hover .tooltiptext {
visibility: visible;
}
#T_3bac276a_15f8_11ea_b73d_475809f3cfcd {
position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="T_3bac276a_15f8_11ea_b73d_475809f3cfcd">
<thead>
<tr>
<th class="blank level0"></th>
<th class="col_heading level0 col0"> a</th>
<th class="col_heading level0 col1">b</th>
<th class="col_heading level0 col2">c</th>
<th class="col_heading level0 col3">d</th>
</tr>
</thead>
<tbody>
<tr>
<th id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdlevel0_row0" class="row_heading level0 row0"> 0
</th>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow0_col0" class="data row0 col0">1</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow0_col1" class="data row0 col1">x</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow0_col2" class="data row0 col2">0</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow0_col3" class="data row0 col3">0.0106405</td>
</tr>
<tr>
<th id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdlevel0_row1" class="row_heading level0 row1">1</th>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow1_col0" class="data row1 col0">2</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow1_col1" class="data row1 col1">y</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow1_col2" class="data row1 col2">0</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow1_col3" class="data row1 col3">0.00423519</td>
</tr>
<tr>
<th id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdlevel0_row2" class="row_heading level0 row2">2</th>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow2_col0" class="data row2 col0">3</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow2_col1" class="data row2 col1">z</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow2_col2" class="data row2 col2">0</td>
<td id="T_3bac276a_15f8_11ea_b73d_475809f3cfcdrow2_col3" class="data row2 col3">0.0071003</td>
</tr>
</tbody>
</table>
I want this <th class="col_heading level0 col2" >c</th>
to be <th class="col_heading level0 col2" ><div class="tooltiptext">This is it.</div>c</th>