Simple tooltips with data attributes:

<!-- Tooltip on Top -->
<button type="button" class="btn btn-primary" 
        data-bs-toggle="tooltip" 
        data-bs-placement="top" 
        title="Tooltip on top">
    Tooltip on top
</button>

<!-- Tooltip on Bottom -->
<button type="button" class="btn btn-primary" 
        data-bs-toggle="tooltip" 
        data-bs-placement="bottom" 
        title="Tooltip on bottom">
    Tooltip on bottom
</button>

Simple popovers with data attributes:

<!-- Basic Popover -->
<button type="button" class="btn btn-primary" 
        data-bs-toggle="popover" 
        data-bs-placement="top" 
        data-bs-content="Popover content here">
    Click for popover
</button>

<!-- Popover with Title -->
<button type="button" class="btn btn-primary" 
        data-bs-toggle="popover" 
        data-bs-placement="top" 
        data-bs-title="Popover Title" 
        data-bs-content="This is the popover content">
    Popover with Title
</button>

Popovers that support HTML formatting:

<button type="button" class="btn btn-primary" 
        data-bs-toggle="popover" 
        data-bs-html="true" 
        data-bs-placement="top" 
        data-bs-title="<strong>HTML Popover</strong>" 
        data-bs-content="<em>This popover</em> contains <u>HTML</u> content with <b>formatting</b>.">
    HTML Popover
</button>

Popovers that can be dismissed by clicking outside:

<button type="button" class="btn btn-primary" 
        data-bs-toggle="popover" 
        data-bs-trigger="focus" 
        data-bs-placement="top" 
        data-bs-title="Dismissible" 
        data-bs-content="Click outside to dismiss">
    Dismissible Popover
</button>

Initialize tooltips and popovers with JavaScript:

// Initialize all tooltips
var tooltipTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
});

// Initialize all popovers
var popoverTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="popover"]')
);
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl);
});