title: How to display an enlarged version of an image using a bootstrap popover?
body: <p>I currently have a program which takes user inputs and displays them into a dynamically created table. One of the inputs are an image passed through an input of type file. I want to be able to enlarge this image using a popover while hovering over it (mouseover) in the table itself. </p>
  
  <p>Bellow is the jQuery code i have used so far, i am unsure as to why it would not be working. I believe it has something to do with the "this" passed through in the popover function.. </p>
  
  <pre><code>//function that adds input values to the table
  function addToTable() {
    //add tbody tag if one is not present
    if($("#inputTable tBody").length == 0) {
      $("#inputTable").append("&lt;tbody&gt;&lt;/tbody&gt;");
    }
  
    $(function() {
      $('#insertImage').on('change', function()
      {
        var filePath = $(this).val();
        console.log(filePath);
      });
    });
  
  var imageLocation = $("#insertImage").val().replace(/C:\\fakepath\\/i, "images/");
  
    //append inputs to the Table
    $("#inputTable tbody").append(
      "&lt;tr&gt;" +
        "&lt;td&gt;" + "&lt;img src=" + imageLocation + " class='image'" + "data-toggle='popover'" + "data-img=" + imageLocation + " title='popover header' id='imageEnlarge'&gt;" + "&lt;/td&gt;" +
        "&lt;td&gt;" + $("#addName").val() + "&lt;/td&gt;" +
        "&lt;td&gt;" + $("#addSurname").val() + "&lt;/td&gt;" +
        "&lt;td&gt;" +
          "&lt;button type='button' " +
            "class='btn'&gt;&lt;i class='fas fa-user-edit' id='pencilIcon'&gt;&lt;/i&gt;&lt;/button&gt;" +
        "&lt;td&gt;" +
          "&lt;button type='button' " +
            "onclick='openModal(); deleteData(this);'" +
            "class='btn'&gt;&lt;i class='fas fa-dumpster' id='dumpsterIcon'&gt;&lt;/i&gt;&lt;/button&gt;" +
          "&lt;/button&gt;" +
        "&lt;/td&gt;" +
      "&lt;/tr&gt;"
    );
  }
  
  $('#imageEnlarge').on("mouseover", function() {
    $('[data-toggle="popover"]').popover({
           //trigger: 'focus',
       trigger: 'hover',
           html: true,
           content: function () {
         return '&lt;img class="img-fluid" src="'+$(this).data('img') + '" /&gt;';
           },
           title: 'Enlarged Image'
     })
  })
  </code></pre>
  
  <p>The main points of focus are these lines of code:</p>
  
  <pre><code>var imageLocation = $("#insertImage").val().replace(/C:\\fakepath\\/i, "images/");
  
  "&lt;td&gt;" + "&lt;img src=" + imageLocation + " class='image'" + "data-toggle='popover'" + "data-img=" + imageLocation + " title='popover header' id='imageEnlarge'&gt;" + "&lt;/td&gt;"
  
  $('#imageEnlarge').on("mouseover", function() {
    $('[data-toggle="popover"]').popover({
           //trigger: 'focus',
       trigger: 'hover',
           html: true,
           content: function () {
         return '&lt;img class="img-fluid" src="'+$(this).data('img') + '" /&gt;';
           },
           title: 'Enlarged Image'
     })
  })
  
  </code></pre>
  
  <p>Any help would be greatly appreciated !</p>