Popovers | DashLite Admin Template

Components

## Popovers

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

#### Basic Examples

Click the following button to see the basic example of popover.

Uses Example

    <button type="button" class="btn 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?">
      <span>Click to toggle popover</span>
    </button>

#### Four Directions

Use `data-bs-placement` value: `top, right, bottom`, and `left` direction.

Uses Example

    <button type="button" class="btn btn-primary" data-bs-container="body"
        data-bs-toggle="popover" data-bs-placement="top"
        data-bs-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
        <span>Popover on top</span>
    </button>

#### Dismissible Popover

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

Uses Example

    <button tabindex="0" class="btn btn-danger btn-dim" data-bs-toggle="popover"
        data-trigger="focus" title="Dismissible popover"
        data-bs-content="And here's some amazing content. It's very engaging. Right?">
        <span>Dismissible popover</span>
    </button>

#### Dismissible Popover

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

Uses Example

    <span class="d-inline-block" data-bs-toggle="popover" data-bs-content="Disabled popover">
      <button class="btn btn-gray" style="pointer-events: none;" type="button" disabled><span>Disabled button</span></button>
    </span>

##### Select Your Country

- Argentina
- Australia
- Bangladesh
- Canada (English)
- Centrafricaine
- China
- France
- Germany
- Iran
- Italy
- México
- Philippines
- Portugal
- South Africa
- Spain
- Switzerland
- United Kingdom
- United State