Tooltip with HTML content

HTML

<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>

CSS

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

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

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

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