Bootstrap 5 tooltips not working when added after document ready

Question

I have a page that loads a javascript file. At the top of the javascript file I am declaring my constants for Bootstrap 5 tooltips:

const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

On the document ready, I am using moment.js to compare today versus the due date of a particular event. In a javascript function, if the event date 2 days or closer to today, then a span element is added to the page, with this markup:

$("#warning"+i).html('<span class="exp-warn" data-bs-toggle="tooltip" data-bs-title="This pick will expire soon." data-bs-placement="right"><i class="bi bi-exclamation-diamond-fill"></i></span>');

The javascript logic is working correctly and displaying the event's warning, but the tooltip itself is not displaying when I hover over the element.

Is there any code I need to add for tooltips that are added to the page afterr or during the document ready?

IT goldman · Accepted Answer · 2025-05-08 01:20:10Z

1

You should initialize that tooltip as well using almost the same code.

new bootstrap.Tooltip(document.querySelector("#warning"+i));

I think bootstrap 5 still supports jQuery so you can instead:

$("#warning"+i).html('<span>...</span>').tooltip();

Whatever you do, do not initialize on same element more than once.

answered May 8 at 1:20

IT goldman

20.4k2 gold badges18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Bootstrap 5 tooltips not working when added after document ready

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related