How to dynamically insert images into Bootstrap Popover

Question

I want to use popover to show product images. Any idea how I can grab the image from the data-img attribute correctly? Thank you.

<a href='#' class='toggle-popover' title='Hello World' data-img='http://www.google.com/intl/en_ALL/images/srpr/logo11w.png' data-trigger='focus' data-toggle='popover'>Product Name</a>

$(document).ready(function() {
  $('[data-toggle="popover"]').popover({
    title: '',
    trigger: 'hover',
    content: '<div class="row">' +
      '<div class="col-sm-12 text-center ">' +
      '<div class="content3">' +
      '<div class="pt-3"><img src="' + $(this).data('img') + '"/></div>' +
      '</div>' +
      '</div>' +
      '</div>',
    html: true
  });
});

$(this).data('img') shows as undefined .

Answer 1

You can use .each() to iterate and set the popover content using current context ie this

$('[data-toggle="popover"]').each(function(){
    $(this).popover({
    title: '',
    trigger: 'hover',
    content: '<div class="row">' +
      '<div class="col-sm-12 text-center ">' +
      '<div class="content3">' +
      '<div class="pt-3"><img src="' + $(this).data('img') + '"/></div>' +
      '</div>' +
      '</div>' +
      '</div>',
    html: true
  })
});