## 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>

Dismissible popover

##### On this page

##### Demo widget

I need help with something

I can’t reorder a product I previously ordered

How do I place an order?

My payment method not working

##### Eric

Ask us anything – we’ll get back to you here or by email within 24 hours.

##### Theme Customizer

Explore different styles according to your preferences

##### Color Scheme

Light
Dark
Auto

##### RTL

Change text direction

##### Support Chat

Toggle support chat

##### Navigation Type

Vertical
Horizontal
Combo
Dual nav

##### Vertical Navbar Appearance

Default Default
Darker Lighter

##### Horizontal Navbar Shape

Default
Slim

##### Horizontal Navbar Appearance

Default
Darker Lighter
Purchase template
customize