Veja como é simples utilizar popovers no bootstrap 5. documentação https://getbootstrap.com/docs/5.1/components/popovers/

Você irá precisar do https://popper.js.org, bootstrap.min.css e bootstrap.bundle.js

 

 

<div class="container mt-3 pt-3">
 <div class="row g-3">
 <div class="col-12 col-md-4">
 <div class=" btn-secondary h-100 p-3">
 <button type="button" class="btn btn-secondary w-100 p-3 fs-1" data-bs-toggle="popover" data-bs-placement="right" data-bs-custom-class="custom-popover" data-bs-title="Custom popover"
 data-bs-content="This popover is themed via CSS variables.">
 popover right
 </button>
 </div>
 </div>

 <div class="col-12 col-md-4">
 <div class="bg-primary h-100 p-3">
 <button type="button" class="btn w-100 h100 btn-primary p-3 fs-1" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-custom-class="custom-popover" data-bs-title="Custom popover"
 data-bs-content="This popover is themed via CSS variables.">
 popover bottom
 </button>
 </div>
 </div>

 <div class="col-12 col-md-4">
 <div class="btn-warning h-100 p-3">
 <button type="button" class="btn btn-warning w-100 p-3 fs-1" data-bs-toggle="popover" data-bs-placement="left" data-bs-custom-class="custom-popover" data-bs-title="Custom popover"
 data-bs-content="This popover is themed via CSS variables.">
 popover left
 </button>
 </div>
 </div>

 <div class="col-12">
 <div class="btn-dark h-100 p-3">
 <button type="button" class="btn btn-dark w-100 p-3 fs-1" data-bs-toggle="popover" data-bs-placement="top" data-bs-custom-class="custom-popover" data-bs-title="Custom popover" data-bs-content="This popover is themed via CSS variables.">
 popover top
 </button>
 </div>
 </div>

 </div>
 </div>

 

Javascript

<script type="text/javascript">
 var popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
 var popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl, {
 trigger: 'focus'
 }))
 </script>

Dependencias

https://popper.js.org/