Tooltips & Popovers in Bootstrap

<!-- Tooltip -->
<button type="button" class="btn btn-secondary"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        title="Tooltip text">
  Hover for tooltip
</button>

<!-- Popover -->
<button type="button" class="btn btn-danger"
        data-bs-toggle="popover"
        title="Popover title"
        data-bs-content="Popover content">
  Click for popover
</button>

<!-- Initialize in JavaScript -->
<script>
// Enable all tooltips
const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]')
tooltips.forEach(el => new bootstrap.Tooltip(el))

// Enable all popovers
const popovers = document.querySelectorAll('[data-bs-toggle="popover"]')
popovers.forEach(el => new bootstrap.Popover(el))
</script>