<div class="container py-5 text-center">
  <h1 class="bstip-title">Hover any button</h1>
  <p class="text-muted small mb-4">Real Bootstrap tooltips, initialized once in JavaScript from a data attribute.</p>
  <div class="d-flex flex-wrap gap-3 justify-content-center">
    <button class="btn btn-dark" data-bs-toggle="tooltip" data-bs-placement="top" title="Appears above">Top</button>
    <button class="btn btn-dark" data-bs-toggle="tooltip" data-bs-placement="right" title="Appears to the right">Right</button>
    <button class="btn btn-dark" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Appears below">Bottom</button>
    <button class="btn btn-dark" data-bs-toggle="tooltip" data-bs-placement="left" title="Appears to the left">Left</button>
    <button class="btn btn-outline-dark" data-bs-toggle="tooltip" data-bs-html="true" title="<strong>Bold</strong> HTML content">HTML content</button>
    <button class="btn btn-primary" data-bs-toggle="tooltip" title="Click me to save your changes">Save</button>
  </div>
  <p class="text-muted small mt-4">Tooltips initialized: <strong id="bstipCount">0</strong></p>
</div>

.bstip-title { font-weight: 800; letter-spacing: -0.01em; }

// Bootstrap does not auto-initialize tooltips — every [data-bs-toggle="tooltip"]
// element needs an explicit new bootstrap.Tooltip(el) call, unlike Modal/Collapse/
// Dropdown which wire themselves up automatically from their own data attributes.
const triggers = document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltips = [...triggers].map(el => new bootstrap.Tooltip(el));
document.getElementById('bstipCount').textContent = tooltips.length;