Bootstrap Tooltip with HTML content

Preview

Did you know that we eat more apples than any other fruit. But did you also know that apples from the supermarket are not fresh.

HTML

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-toggle="tooltip" data-bs-placement="bottom" 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.

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() {
$('[data-toggle="tooltip"]').tooltip({
html: true
})
})
</script>