Popover - Documentation | Front - Multipurpose Responsive Template

Example

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

Preview
HTML

Popover on top

Popover on right

Popover on bottom

Popover on left

              
                <div class="row">
                  <div class="col-lg-3">
                    <a class="d-block text-center" href="#" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="And here's some amazing content. It's very engaging. Right?">
                      <img class="img-fluid mb-3" src="../assets/svg/components/popover-top.svg" alt="Image Description">
                      <h4>Popover on top</h4>
                    </a>
                  </div>

                  <div class="col-lg-3">
                    <a class="d-block text-center" href="#" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="And here's some amazing content. It's very engaging. Right?">
                      <img class="img-fluid mb-3" src="../assets/svg/components/popover-Backward.svg" alt="Image Description">
                      <h4>Popover on right</h4>
                    </a>
                  </div>

                  <div class="col-lg-3">
                    <a class="d-block text-center" href="#" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="And here's some amazing content. It's very engaging. Right?">
                      <img class="img-fluid mb-3" src="../assets/svg/components/popover-bottom.svg" alt="Image Description">
                      <h4>Popover on bottom</h4>
                    </a>
                  </div>

                  <div class="col-lg-3">
                    <a class="d-block text-center" href="#" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="And here's some amazing content. It's very engaging. Right?">
                      <img class="img-fluid mb-3" src="../assets/svg/components/popover-left.svg" alt="Image Description">
                      <h4>Popover on left</h4>
                    </a>
                  </div>
                </div>
                <!-- End Row -->

Dark

Use data-bs-popover-dark data attribute for a darker color skin option.

Popover on top

Popover on right

Popover on bottom

Popover on left

              
                <div class="row">
                  <div class="col-lg-3">
                    <a class="d-block text-center" href="#" data-bs-popover-dark data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" title="Top example" data-bs-content="And here's some amazing content. It's very engaging. Right?">
                      <img class="img-fluid mb-3" src="../assets/svg/components/popover-top.svg" alt="Image Description">
                      <h4>Popover on top</h4>
                    </a>
                  </div>

                  <div class="col-lg-3">
                    <a class="d-block text-center" href="#" data-bs-popover-dark data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" title="Right example" data-bs-content="And here's some amazing content. It's very engaging. Right?">
                      <img class="img-fluid mb-3" src="../assets/svg/components/popover-right.svg" alt="Image Description">
                      <h4>Popover on right</h4>
                    </a>
                  </div>

                  <div class="col-lg-3">
                    <a class="d-block text-center" href="#" data-bs-popover-dark data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" title="Bottom example" data-bs-content="And here's some amazing content. It's very engaging. Right?">
                      <img class="img-fluid mb-3" src="../assets/svg/components/popover-bottom.svg" alt="Image Description">
                      <h4>Popover on bottom</h4>
                    </a>
                  </div>

                  <div class="col-lg-3">
                    <a class="d-block text-center" href="#" data-bs-popover-dark data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" title="Left example" data-bs-content="And here's some amazing content. It's very engaging. Right?">
                      <img class="img-fluid mb-3" src="../assets/svg/components/popover-left.svg" alt="Image Description">
                      <h4>Popover on left</h4>
                    </a>
                  </div>
                </div>
                <!-- End Row -->

              
                // INITIALIZATION OF DARK POPOVER
                // =======================================================
                })