I find myself struggling with tooltips again. I added an input to perform searches, and when I perform any search and try to see the tooltip, I only see the container (with its background color, borders and so on) but without the content of the tooltip. I will leave the example so that you can understand what happens:
document.getElementById('searchInput').addEventListener('keyup', function() {
const searchText = this.value.toLowerCase();
document.querySelectorAll('.table-mercado tbody tr').forEach(row => {
const nameCell = row.querySelector('td:nth-child(2)');
const priceCell = row.querySelector('td:nth-child(3)');
const name = nameCell ? nameCell.textContent.toLowerCase() : '';
const price = priceCell ? priceCell.textContent.toLowerCase() : '';
if (name.includes(searchText) || price.includes(searchText)){
row.style.display = '';
} else {
row.style.display = 'none';
}
});
});.table-mercado {
border-collapse: collapse;
width: 100%;
border-spacing: 0;
border: none;
}
.table-mercado .th-mercado, .td-mercado, .tr-mercado {
padding: 10px;
text-align: center;
}
.td-mercado div, .td-mercado form {
justify-content: center;
margin: auto;
}
.td-mercado button {
margin: 0 auto;
display: block;
}
.tooltip-mercado .tooltiptext-mercado {
display: block;
visibility: hidden;
opacity: 0;
width: 250px;
background-color: black;
color: #fff;
text-align: left;
padding: 15px;
border-radius: 5px;
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
z-index: 9999;
opacity: 0;
transition: opacity 0.3s, visibility 0.3s;
margin-left: 10px;
box-sizing: border-box;
white-space: nowrap;
border: 1px solid #ddd;
}
.tooltiptext-mercado table {
border-collapse: collapse;
width: 100%;
}
.tooltiptext-mercado form {
width: 100%;
margin-top: 10px;
}
.tooltip-mercado .tooltiptext-mercado::after {
content: "";
position: absolute;
top: 50%;
left: -10px;
transform: translateY(-50%);
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.block-img:hover .tooltiptext-mercado{
visibility: visible !important;
opacity: 1 !important;
}
.th-mercado {
cursor: pointer;
position: relative;
color: black;
padding-right: 20px;
text-align: left;
}
.th-mercado::after {
content: '';
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
opacity: 0.8;
color: white;
}
<input type="text" id="searchInput">
<div class="table-container">
<table class="table-mercado">
<thead>
<tr class="tr-mercado">
<th class="th-mercado"></th>
<th class="th-mercado" >Nombre</th>
<th class="th-mercado" >Price</th>
</tr>
</thead>
<tbody>
<tr class="row-mercado">
<td class="td-mercado" style="width: 60px; height: 60px; text-align: center; position: relative;">
<div class="block-img">
<img src="https://img.freepik.com/free-vector/earth-globe-icon-white-background_1308-125016.jpg" style="width: 60px; height: 60px; display: block;">
<!-- Tooltip -->
<div class="tooltip-mercado">
<span class="tooltiptext-mercado">
<table>
<tr class="trtooltipmercado">
<td>content</td>
</tr>
</table>
</span>
</div>
</div>
</td>
<td class="td-mercado"> Name1 </td>
<td class="td-mercado"> 10 </td>
</tr>
<tr class="row-mercado">
<td class="td-mercado" style="width: 60px; height: 60px; text-align: center; position: relative;">
<div class="block-img">
<img src="https://img.freepik.com/free-vector/earth-globe-icon-white-background_1308-125016.jpg" style="width: 60px; height: 60px; display: block;">
<!-- Tooltip -->
<div class="tooltip-mercado">
<span class="tooltiptext-mercado">
<table>
<tr class="trtooltipmercado">
<td>content</td>
</tr>
</table>
</span>
</div>
</div>
</td>
<td class="td-mercado"> Name2 </td>
<td class="td-mercado"> 50 </td>
</tr>
</tbody>
</table>
</div>