Open wsdev101 opened 3 months ago
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.
$(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>
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