Tooltip does not appear when searching input

September 23, 2024

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>

>Solution :

You are toggling the tooltip content as well in the process. You should restrict the query selector.
To fix it, change it to .table-mercado > body > tr. So it should be:

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';
        }

    });
});

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>