Just a small tip if you are using Bootstrap tooltips and htmx: It is important to hide any tooltip that might be visible if you are swapping the HTML, otherwise, the tooltip might get "stuck" on the page. I did this with an

htmx:beforeSwap

event listener. I know in my case that the tooltip is part of the

<tr>

element that will be swapped (On of the many rows that could get swapped). So I check for that and hide the correct one:

document.addEventListener('htmx:beforeSwap', ev => {
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            const elementToBeSwapped = ev.detail.target;
            for (const tooltipTriggerListElement of tooltipTriggerList) {
                const rowElementOfTooltip = tooltipTriggerListElement.closest('tr');
                // To avoid that a tooltip remains stuck because the HTML that it refers
                // to is swapped out for new html, we need to hide the tooltip.
                if( elementToBeSwapped === rowElementOfTooltip) {
                    bootstrap.Tooltip.getInstance(tooltipTriggerListElement).hide();
                }
            }
        });

It is also important to not use

new bootstrap.Tooltip(..)

, but

bootstrap.Tooltip.getOrCreateInstance(..

so already initialized tooltips is not initialized again. (I am inializing from

htmx.onLoad(function (element) {...})

so that swapped in tooltips will also work.