pokemon/src/assets/js/main.js

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;
import 'bootstrap/dist/js/bootstrap.bundle.min.js';

// trap browser back and close the modal if open
const cardModal = document.getElementById('cardModal');
const loadingMsg = cardModal.innerHTML;
// Push a new history state when the modal is shown
cardModal.addEventListener('shown.bs.modal', () => {
  history.pushState({ modalOpen: true }, null, '#cardModal');
});
// Listen for the browser's back button (popstate event)
window.addEventListener('popstate', (e) => {
  if (cardModal.classList.contains('show')) {
    const modalInstance = bootstrap.Modal.getInstance(cardModal);
    if (modalInstance) {
      modalInstance.hide();
    }
  }
});
// Trigger a back navigation when the modal is closed via its native controls (X, backdrop click)
cardModal.addEventListener('hide.bs.modal', () => {
  cardModal.innerHTML = loadingMsg;
  if (history.state && history.state.modalOpen) {
    history.back();
  }
});


  import { Tooltip } from "bootstrap";

  // Initialize all tooltips globally
  const initTooltips = () => {
    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(el => {
      if (!el._tooltipInstance) {
        el._tooltipInstance = new Tooltip(el, {
          container: 'body',   // ensures tooltip is appended to body, important for modals
        });
      }
    });
  };

  // Run on page load
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initTooltips);
  } else {
    initTooltips();
  }

  // Optional: observe DOM changes for dynamically added tooltips (e.g., modals loaded later)
  const observer = new MutationObserver(() => initTooltips());
  observer.observe(document.body, { childList: true, subtree: true });