Example
Code Example
<button type="button" class="btn btn-nmw btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button> <a tabindex="0" class="btn btn-nmw btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a> <span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover"> <button class="btn btn-nmw btn-lg btn-primary" type="button" disabled>Disabled button</button> </span>
Four directions
Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.
Code Example
<button type="button" class="btn btn-nmw btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover"> Popover on top </button> <button type="button" class="btn btn-nmw btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover"> Popover on right </button> <button type="button" class="btn btn-nmw btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover"> Popover on bottom </button> <button type="button" class="btn btn-nmw btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover"> Popover on left </button>