<div class="demo-container">
<div class="demo-caption">
<i class="fa-solid fa-lightbulb fa-pull-left"></i>
Did you know that we eat more apples 
than any other fruit. But did you also know that apples from the 
<span class="pop-over-text" 
data-bs-toggle="tooltip" 
data-bs-html="true" 
data-bs-title="<div class='pop-over-content'>
<p><img src='apples-supermarket.jpg' alt='' class='demo-caption-image' /></p>
<p>Supermarket apples are usually covered in wax, hot-air dried, and sent into cold storage. After six to twelve months, they finally land on the grocery store shelves.</p></div>">
supermarket</span> are not fresh. 
</div> 
</div>

.demo-container { 
  background-image: url("bg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  min-height: 320px;
  padding: 2rem;
}

.demo-caption {
  max-width: 360px;
  background-color: rgba(130, 166, 52, 0.60);
  padding: 1rem;
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 1.2em;
  line-height: 1em;
  border-radius: 10px;
  border: 4px solid rgba(255, 255, 255, 0.24);
}

.demo-caption-image {
  height: 60px;
  width: 60px;
  border: 4px solid #fff;
  border-radius: 100%;
  margin-top: 14px;
}

.pop-over-text {
  color: #FFFFFF;
  border-bottom: 1px dashed #FFFFFF;
  cursor: help;
}

.pop-over-content p {
  margin: 4px 0 14px 0;
  line-height: 1em;
}

.fa-pull-left {
  font-size: 1.2em;
  color: #FFFFFF;
}

<script>
$(function() {
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
})
</script>