<div class="row">
<div class="col-lg-3">
<a class="d-block text-center" href="#" data-container="body" data-toggle="popover" data-placement="top" title="Top example" data-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-container="body" data-toggle="popover" data-placement="right" title="Right example" data-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-container="body" data-toggle="popover" data-placement="bottom" title="Bottom example" data-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-container="body" data-toggle="popover" data-placement="left" title="Left example" data-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 -->
// Dismiss Popover on next click
$('.popover-dismiss').popover({
trigger: 'focus'
})
