I am refreshing a table every 5 seconds with JS. The file it loads has bootstrap tooltips and confirmations. When you are hovering over one of these elements, and the data refreshes, the tooltip or confirmation remains on the screen even if the mouse is no longer on the area.

Index JS

$(document).ready(function(){
    $('#table-main').load('functions/fetch-main.php');
    refreshTable();
});

function refreshTable(){
    $('#table-main').load('functions/fetch-main.php', function(){
        setTimeout(refreshTable, 5000);
    });
}

Within the functions/fetch-main.php file this is one of the tooltips

echo "<button type='button' class='btn btn-warning btn-sm' data-toggle='modal' data-target='#editlog' data-id='" . $row['id'] . "'><span data-toggle='tooltip' title='Edit Record'><i class='fas fa-edit'></i></span></button> ";

When the file loads again, the tool top remains on the screen

To get the tooltip and confirmation to work in the first place, I had to copy the following to the actual fetch file even though it is already in the main index file

<script type="text/javascript">
    $(document).ready(function(){
        $('[data-toggle="tooltip"]').tooltip();
    });
    $('[data-toggle=confirmation]').confirmation({
        rootSelector: '[data-toggle=confirmation]'
    });
    $('[data-toggle=confirmation-popout]').confirmation({
        rootSelector: '[data-toggle=confirmation-popout]'
    });
</script>

Is it possible to stop this from happening?

Thanks