Bootstrap docs

# Popovers

A pop-up box that appears when the user clicks/hovers on an element.

#### Static examples

### Top popover

And here's some amazing content inside popover body that can be html. It's very engaging. Right?

### Right popover

And here's some amazing content inside popover body that can be html. It's very engaging. Right?

### Bottom popover

And here's some amazing content inside popover body that can be html. It's very engaging. Right?

### Left popover

And here's some amazing content inside popover body that can be html. It's very engaging. Right?

#### Live demo

    <!-- Popover on top -->
    <button type="button" class="btn btn-outline-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover" title="Top popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
      Popover on top
    </button>

    <!-- Popover on right -->
    <button type="button" class="btn btn-outline-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-trigger="hover" title="Right popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
      Popover on right
    </button>

    <!-- Popover on bottom -->
    <button type="button" class="btn btn-outline-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-trigger="hover" title="Bottom popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
      Popover on bottom
    </button>

    <!-- Popover on left -->
    <button type="button" class="btn btn-outline-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-trigger="hover" title="Left popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
      Popover on left
    </button>

#### Toggle options

Toggle popover on focus

    <!-- Toggle popover on click (click is default trigger) -->
    <button type="button" class="btn btn-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Popover on click" data-bs-content="And here's some amazing content. It's very engaging. Right?">
      Toggle popover on click
    </button>

    <!-- Toggle popover on hover -->
    <button type="button" class="btn btn-outline-primary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover" title="Popover on hover" data-bs-content="And here's some amazing content. It's very engaging. Right?">
      Toggle popover on hover
    </button>

    <!-- Toggle popover on focus -->
    <a class="btn btn-outline-secondary" href="#!" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="focus" title="Popover on focus" data-bs-content="And here's some amazing content. It's very engaging. Right?" tabindex="1">
      Toggle popover on focus
    </a>

Top