Tooltips & Popovers

Add small overlay content to any element for housing secondary information.

Basic Tooltips

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

Tooltip Directions

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

<button type="button" class="btn btn-primary"
        data-bs-toggle="tooltip"
        data-bs-placement="right"
        data-bs-title="Tooltip on right">Right</button>

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

<button type="button" class="btn btn-primary"
        data-bs-toggle="tooltip"
        data-bs-placement="left"
        data-bs-title="Tooltip on left">Left</button>

Custom HTML Tooltips

<button type="button" class="btn btn-success"
        data-bs-toggle="tooltip"
        data-bs-html="true"
        data-bs-title="<em>Tooltip</em> with <strong>HTML</strong>">
    HTML Tooltip
</button>

Popovers

Basic Popover

<button type="button" class="btn btn-danger"
        data-bs-toggle="popover"
        data-bs-title="Popover title"
        data-bs-content="And here's some amazing content.">
    Click to toggle popover
</button>

Dismissible Popover

<button type="button" class="btn btn-info"
        data-bs-toggle="popover"
        data-bs-trigger="focus"
        data-bs-title="Dismissible popover"
        data-bs-content="Click anywhere to close">
    Dismissible popover
</button>

Popover Directions

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover"
        data-bs-placement="top"
        data-bs-title="Popover on top"
        data-bs-content="Top popover content">
    Popover on top
</button>

HTML Content Popover

<button type="button" class="btn btn-warning"
        data-bs-toggle="popover"
        data-bs-html="true"
        data-bs-title="<strong>HTML Title</strong>"
        data-bs-content="<p>This is <em>HTML</em> content</p>">
    Popover with HTML
</button>