Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Popovers on Bootstrap

Basic Example

<div class="row g-1">
  <div class="col-auto">
    <button class="btn btn-secondary m-1" type="button" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top Popover">Top Popover</button>
  </div>
  <div class="col-auto">
    <button class="btn btn-secondary m-1" type="button" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left Popover">Left Popover</button>
  </div>
  <div class="col-auto">
    <button class="btn btn-secondary m-1" type="button" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right Popover">Right Popover</button>
  </div>
  <div class="col-auto">
    <button class="btn btn-secondary m-1" type="button" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom Popover">Bottom Popover</button>
  </div>
</div>

Dismissible Example

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

<a class="btn btn-lg btn-danger" tabindex="0" 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>

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.18.1

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize