Dashboard
Applications
Pages
UI Elements
Shaira Diaz

Premium Member

Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Four Directions

Four options are available: top, right, bottom, and left aligned.

<button type="button" class="btn btn-secondary" 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-secondary" 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-secondary" 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-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>



Dismiss on Next Click

Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element.

Dismissible popover 
<a tabindex="0" class="btn btn-primary" 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>



© 2023. Dashbyte. All Rights Reserved. Created by: Themepixels