Tooltips and Popovers

Tooltips and Popovers

<!-- Tooltips -- must be initialized via JS -->
<button class="btn btn-secondary"
        data-bs-toggle="tooltip"
        data-bs-placement="top"
        title="This is a tooltip">
    Hover me
</button>

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

<!-- Popover (bigger tooltip with title and content) -->
<button class="btn btn-danger"
        data-bs-toggle="popover"
        data-bs-title="Delete Item"
        data-bs-content="This action cannot be undone."
        data-bs-trigger="focus">
    Click me
</button>

<!-- Initialize popovers -->
<script>
document.querySelectorAll("[data-bs-toggle=popover]")
    .forEach(el => new bootstrap.Popover(el));
</script>