Содержание
Вопрос или проблема
Сейчас я снова сталкиваюсь с проблемами с подсказками. Я добавил поле ввода для поиска, и когда я выполняю любой поиск и пытаюсь увидеть подсказку, я только вижу контейнер (с его фоновым цветом, границами и так далее), но без содержимого подсказки. Я оставлю пример, чтобы вы могли понять, что происходит:
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" >Название</th>
<th class="th-mercado" >Цена</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;">
<!-- Подсказка -->
<div class="tooltip-mercado">
<span class="tooltiptext-mercado">
<table>
<tr class="trtooltipmercado">
<td>содержимое</td>
</tr>
</table>
</span>
</div>
</div>
</td>
<td class="td-mercado"> Название1 </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;">
<!-- Подсказка -->
<div class="tooltip-mercado">
<span class="tooltiptext-mercado">
<table>
<tr class="trtooltipmercado">
<td>содержимое</td>
</tr>
</table>
</span>
</div>
</div>
</td>
<td class="td-mercado"> Название2 </td>
<td class="td-mercado"> 50 </td>
</tr>
</tbody>
</table>
</div>Вы также переключаете содержимое подсказки в процессе. Вам следует ограничить селектор запроса.
Чтобы это исправить, измените его на .table-mercado > tbody > tr. Итак, это должно быть:
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">Название</th>
<th class="th-mercado">Цена</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;">
<!-- Подсказка -->
<div class="tooltip-mercado">
<span class="tooltiptext-mercado">
<table>
<tr class="trtooltipmercado">
<td>содержимое</td>
</tr>
</table>
</span>
</div>
</div>
</td>
<td class="td-mercado"> Название1 </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;">
<!-- Подсказка -->
<div class="tooltip-mercado">
<span class="tooltiptext-mercado">
<table>
<tr class="trtooltipmercado">
<td>содержимое</td>
</tr>
</table>
</span>
</div>
</div>
</td>
<td class="td-mercado"> Название2 </td>
<td class="td-mercado"> 50 </td>
</tr>
</tbody>
</table>
</div>.
Ответ или решение
Для решения вашей проблемы с отображением подсказок при выполнении поиска в вашем проекте, необходимо внести несколько изменений в ваш код. Основная ошибка заключается в том, что вы скрываете элементы, включая подсказки, когда фильтруете строки таблицы. Чтобы исправить это, нужно изменить селектор, который используется для выборки строк таблицы в функции обработки события.
Вот шаги, которые помогут вам справиться с проблемой:
-
Измените селектор строк: Вместо использования
.table-mercado tbody trизмените его на.table-mercado > tbody > tr. Это гарантирует, что ваш код будет работать только с строками таблицы, которые содержат данные, и не затронет элементы подсказок, которые находятся вне этого контекста. -
Исправьте CSS для подсказки: Убедитесь, что для коллайдера подсказки у вас правильно установлены стили для видимости. Например, вы можете использовать
visibility: visibleиopacity: 1, когда элемент мыши находится над элементом, на который наводите.
Вот как будет выглядеть исправленный код:
Исправленный JavaScript:
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';
}
});
});CSS остаётся без изменений, но убедитесь, что у вас корректно настроены визуализации:
.tooltip-mercado .tooltiptext-mercado {
display: block;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.3s linear;
/* остальные стили */
}
.block-img:hover .tooltiptext-mercado {
visibility: visible !important;
opacity: 1 !important;
}Полное HTML-содержимое остается тем же:
<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;">
<!-- Подсказка -->
<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;">
<!-- Подсказка -->
<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>Эти изменения должны решить вашу проблему с отображением подсказок при использовании функции поиска. Если у вас будут дополнительные вопросы или нужно будет внести другие изменения, не стесняйтесь обращаться за помощью!