How do I initialize tooltips/popovers for dynamically injected elements?

Asked on Jul 03, 2025

1 Answer

To initialize tooltips or popovers for dynamically injected elements in Bootstrap 5, you need to use JavaScript to manually trigger the initialization after the elements have been added to the DOM.

<!-- BEGIN COPY / PASTE -->
        <!-- Example element with a tooltip -->
        <button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" title="Tooltip text">
            Hover me
        </button>

        <!-- JavaScript to initialize tooltips -->
        <script>
            // Initialize tooltips
            var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
            var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
                return new bootstrap.Tooltip(tooltipTriggerEl);
            });
        </script>
        <!-- END COPY / PASTE -->

Additional Comment:

Ensure that the Bootstrap JavaScript library is included in your project.
After dynamically injecting elements, run the JavaScript code to initialize tooltips or popovers on those elements.
Replace `data-bs-toggle="tooltip"` with `data-bs-toggle="popover"` and use `new bootstrap.Popover(...)` if you are initializing popovers instead.
This example uses Bootstrap's Tooltip component, but the same approach applies to Popovers.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions