Bootstrap 5 data-bs-toggle attributes no longer initialize components added to the DOM after page load

Answer

Bootstrap 5’s data‑api uses delegated listeners on the document, so click‑activated components (Modal, Dropdown, Collapse, Tab, Offcanvas, Alert) work on elements added after page load without any manual constructor calls. Components that require explicit initialization – Tooltip, Popover, and Toast – must be instantiated per‑element, and duplicate initialization should be avoided with the static getOrCreateInstance method.

Confirmed facts

• The delegated handler lazily creates the component on first interaction (e.g., Dropdown.getOrCreateInstance on click).
• Tooltip and Popover never auto‑initialize in Bootstrap 5; they are opt‑in by design.
• Toast only auto‑shows when configured via autohide or show options; otherwise it needs manual new bootstrap.Toast(el).
• Behavior is consistent across Bootstrap 5.0‑5.3 for the delegation mechanism; 5.3 changes do not affect the data‑api lifecycle.

Likely explanation for non‑working dynamic content

If a dynamically added trigger does not respond, the most common causes are:

1. Wrong attribute names (using data-toggle instead of data-bs-toggle).
2. Incorrect target selector (missing # or typo in data-bs-target).
3. Bootstrap bundle loaded twice or conflicting builds, breaking the delegated listener.

Steps to make dynamic content work

For delegation‑based plugins (Modal, Dropdown, etc.)

No extra code is required; just ensure the inserted markup carries the correct data-bs-* attributes and that the bundle is loaded once.

For Tooltip, Popover, Toast

// Example: initializing a tooltip on a newly added button
const btn = document.createElement('button');
btn.setAttribute('data-bs-toggle', 'tooltip');
btn.setAttribute('title', 'Hint');
document.body.appendChild(btn);

// Idempotent initialization
const tooltip = bootstrap.Tooltip.getOrCreateInstance(btn);

Use getOrCreateInstance (or check getInstance first) to avoid creating multiple instances on the same element.

Bulk initialization

When inserting a subtree, scope the query to that subtree:

const container = document.getElementById('ajax‑container');
container.innerHTML = responseHtml;
container.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
  bootstrap.Tooltip.getOrCreateInstance(el);
});

Verification with a minimal test page

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bootstrap 5 dynamic init test</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div id="target"></div>
  <button id="addBtn" class="mt-3">Add tooltip trigger</button>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    document.getElementById('addBtn').addEventListener('click', () => {
      const el = document.createElement('button');
      el.className = 'btn btn-primary mt-2';
      el.setAttribute('data-bs-toggle', 'tooltip');
      el.setAttribute('title', 'Dynamic tooltip');
      document.getElementById('target').appendChild(el);
      // Initialize tooltip idempotently
      bootstrap.Tooltip.getOrCreateInstance(el);
    });
  </script>
</body>
</html>

Open the page, click “Add tooltip trigger”, then hover the newly added button. The tooltip should appear only after the getOrCreateInstance call; removing that line will show no tooltip, confirming the need for manual init.

Missing diagnostic detail

Are you seeing any console errors such as "Bootstrap's tooltip plugin requires Popper" or duplicate‑instance warnings when you add the dynamic content? Knowing whether errors appear would change the recommendation (e.g., fixing a missing Popper dependency vs. adjusting initialization).