Show previous content when document.querySelectorAll()
Author: wsdev101Created Jul 21, 2024Updated Jul 22, 2024
Labels🐛 bug🚧 unconfirmed
Bug description
The Tooltip shows the previous content on mouse Click. It is happening when using document.querySelectorAll for a JS datatable. I want to show a TR data on content when TR is clicked. I need to click twice to get the selected row data.
Rows are add dynamically at runtime.
Reproduction
$(document).on('click', '.prize-info', function() {
const row = $(this);
const $tr = row.closest('tr');
const prize = $tr.data('prize');
tippy(document.querySelectorAll('.prize-info'), {
trigger: 'click',
touch: true,
content: `Value : ${prize}`,
placement: 'left',
});
});
<table >
<thead>
<tr >
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody id="plays">
<tr id="abc" data-prize="1">
<td class="prize-info">A</td>
<td class="prize-info">A</td>
<td class="prize-info">A</td>
</tr>
<tr id="ab1" data-prize="3">
<td class="prize-info">B</td>
<td class="prize-info">B</td>
<td class="prize-info">B</td>
</tr>
<tr id="ab2" data-prize="2">
<td class="prize-info">C</td>
<td class="prize-info">C</td>
<td class="prize-info">C</td>
</tr>
</tbody>
</table>Source: atomiks/tippyjs