Trigger bootstrap tooltip issue

To solve the issue of Bootstrap tooltips not appearing after filtering and updating your list of components, you need to reinitialize the tooltips for the newly added elements. This is because the tooltips are only initialized on the elements present in the DOM at the time of the initial script execution. When you update the list, the new elements are not automatically initialized.

Here's a step-by-step solution:

1. Reinitialize Tooltips After DOM Update: After you update your list (e.g., after filtering), you need to re-run the tooltip initialization code. You can create a function to handle this and call it whenever the list is updated.

2. Use a Function to Initialize Tooltips: Encapsulate your tooltip initialization code in a function so you can call it whenever necessary.

Here's how you can implement this:

<script>
    function initializeTooltips() {
        let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl);
        });
    }

    // Call this function on page load
    document.addEventListener('DOMContentLoaded', function() {
        initializeTooltips();
    });

    // Example: Call this function after updating the list
    function updateList() {
        // Your code to update the list goes here

        // Reinitialize tooltips after updating the list
        initializeTooltips();
    }
</script>

3. Call initializeTooltips After List Update: Ensure that initializeTooltips is called every time you update the list of components. This could be after an AJAX call, a Livewire update, or any other method you use to refresh the list.

By following these steps, you ensure that all elements with the data-bs-toggle="tooltip" attribute are properly initialized with Bootstrap tooltips, even after dynamic updates to the DOM.