Popover
Dokumentasi Bootstrap Popover
<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="https://cdn.btekno.id/templates/nue/svg/components/popover-top.svg" alt="">
<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="https://cdn.btekno.id/templates/nue/svg/components/popover-Backward.svg" alt="">
<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="https://cdn.btekno.id/templates/nue/svg/components/popover-bottom.svg" alt="">
<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="https://cdn.btekno.id/templates/nue/svg/components/popover-left.svg" alt="">
<h4>Popover on left</h4>
</a>
</div>
</div>
<!-- End Row -->
Dark
<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="https://cdn.btekno.id/templates/nue/svg/components/popover-top.svg" alt="">
<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="https://cdn.btekno.id/templates/nue/svg/components/popover-right.svg" alt="">
<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="https://cdn.btekno.id/templates/nue/svg/components/popover-bottom.svg" alt="">
<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="https://cdn.btekno.id/templates/nue/svg/components/popover-left.svg" alt="">
<h4>Popover on left</h4>
</a>
</div>
</div>
<!-- End Row -->