Image bootstrap tooltip does not work

Question

Hi guys. I have the following problem..., for some reason my tooltip is not loading my image. Follow my code below and the picture of what is happening!

<a data-toggle="tooltip" title="<img src='https://www.confidencial.com.br/wp-content/uploads/2019/05/tooltip-cupom-fiscal.jpg'/>"> <i style="text-align: right; font-size:22px; color: #d4b268" class="fa fa-info-circle" aria-hidden="true"></i></a>

jQuery(document).ready(function() {
 jQuery('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'right',
    html: true
 });
});

Answer 1

What was missing there was to insert the data-html="true" to render title content as HTML:

$(function() {
 $('a[data-toggle="tooltip"]').tooltip({
    animated: 'fade',
    placement: 'right',
    html: true
 });
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

<a data-toggle="tooltip" data-html="true" title="<img src='https://www.placecage.com/g/140/100'/>"> <i style="text-align: right; font-size:22px; color: #d4b268" class="fa fa-info-circle" aria-hidden="true"></i>link qualquer</a>