Bootstrap popovers on multipul elements

Question

Having found & tried many popovers with remote content, I came across a script that works with content included on the current page for 1(one) popover.

I then added additional html markup as in the Extended html code area & additional jQuery content as in the Extended jQuery script code area.

Sorry if this post is too long, but have included all content I think is necessary for your understanding of the problem.

Question 1 is can the extended jQuery code be re-written using variable selectors?

Question 2 is can the content for each popover be fetched from a local file on the server?

Example:- /pages/folder/filename.html

Initial html

<div class="ts-item-flex">
  <div id="target">
    // target content
  </div>
</div>

<!-- Popover content target -->
<div class="hidden">
  <div class="_content" id="blah">
    // target content
  </div>
</div>

Initial jQuery script

jQuery(document).ready(function ($) {
// Start of jQuery enclosure --------------------------------------------------

  // We don't want to see the popover contents until the user clicks the target.
  // If you don't hide 'blah' first it will be visible outside the popover.

  // Start
  $('#blah').hide();
  // Initialize our popover
  //
  $('#target').popover({
    content: $('#blah'), // set the content to be the 'blah' div
    placement: 'auto top',
    trigger: 'hover',
    html: true
  });
  // The popover contents will not be set until the popover is shown.  Since we don't
  // want to see the popover when the page loads, we will show it then hide it.
  //
  $('#target').popover('show');
  $('#target').popover('hide');

  // Now that the popover's content is the 'blah' we can make it visible again.
  //
  $('#blah').show();
  // end

  // End of jQuery enclosure ----------------------------------------------------
})

Extended html

<!-- Popover content target01 -->
<div class="hidden">
  <div class="_content" id="blah01">
    // popover content
  </div>
</div>
<!-- Popover content target02 -->
<div class="hidden">
  <div class="_content" id="blah02">
    // popover content
  </div>
</div>
<!-- Popover content target03 -->
<div class="hidden">
  <div class="_content" id="blah03">
    // popover content
  </div>
</div>
<!-- Popover content target04 -->
<div class="hidden">
  <div class="_content" id="blah04">
    // popover content
  </div>
</div>
<!-- Popover content target05 -->
<div class="hidden">
  <div class="_content" id="blah05">
    // popover content
  </div>
</div>
<!-- Popover content target06 -->
<div class="hidden">
  <div class="_content" id="blah06">
    // popover content
  </div>
</div>
<!-- Popover content target07 -->
<div class="hidden">
  <div class="_content" id="blah07">
    // popover content
  </div>
</div>
<div class="hidden">
  <div class="_content" id="blah08">
   // popover content
  </div>
</div>

Extended jQuery script

jQuery(document).ready(function ($) {
// Start of jQuery enclosure --------------------------------------------------

  // We don't want to see the popover contents until the user clicks the target.
  // If you don't hide 'blah' first it will be visible outside the popover.

  // Start
  $('#blah01').hide();
  $('#blah02').hide();
  $('#blah03').hide();
  $('#blah04').hide();
  $('#blah05').hide();
  $('#blah06').hide();
  $('#blah07').hide();
  $('#blah08').hide();

  // Initialize our popover
  //
  $('#target01').popover({
    content: $('#blah01'), // set the content to be the 'blah' div
    placement: 'auto top',
    trigger: 'hover',
    html: true
  });
  $('#target02').popover({
    content: $('#blah02'), // set the content to be the 'blah' div
    placement: 'auto top',
    trigger: 'hover',
    html: true
  });
  $('#target03').popover({
    content: $('#blah03'), // set the content to be the 'blah' div
    placement: 'auto top',
    trigger: 'hover',
    html: true
  });
  $('#target04').popover({
    content: $('#blah04'), // set the content to be the 'blah' div
    placement: 'auto top',
    trigger: 'hover',
    html: true
  });
  $('#target05').popover({
    content: $('#blah05'), // set the content to be the 'blah' div
    placement: 'auto top',
    trigger: 'hover',
    html: true
  });
  $('#target06').popover({
    content: $('#blah06'), // set the content to be the 'blah' div
    placement: 'auto top',
    trigger: 'hover',
    html: true
  });
  $('#target07').popover({
    content: $('#blah07'), // set the content to be the 'blah' div
    placement: 'auto top',
    trigger: 'hover',
    html: true
  });
  $('#target08').popover({
    content: $('#blah08'), // set the content to be the 'blah' div
    placement: 'auto top',
    trigger: 'hover',
    html: true
  });
  // The popover contents will not be set until the popover is shown.  Since we don't
  // want to see the popover when the page loads, we will show it then hide it.
  //
  $('#target01').popover('show');
  $('#target01').popover('hide');
  $('#target02').popover('show');
  $('#target02').popover('hide');
  $('#target03').popover('show');
  $('#target03').popover('hide');
  $('#target04').popover('show');
  $('#target04').popover('hide');
  $('#target05').popover('show');
  $('#target05').popover('hide');
  $('#target06').popover('show');
  $('#target06').popover('hide');
  $('#target07').popover('show');
  $('#target07').popover('hide');
  $('#target08').popover('show');
  $('#target08').popover('hide');

  // Now that the popover's content is the 'blah' dive we can make it visible again.
  //
  $('#blah01').show();
  $('#blah02').show();
  $('#blah03').show();
  $('#blah04').show();
  $('#blah05').show();
  $('#blah06').show();
  $('#blah07').show();
  $('#blah08').show();

  // End of jQuery enclosure ----------------------------------------------------
})

All the above is what I have tried & works as expected.

Below is the solution I have found and it works for me.

I no longer need all the code above.

I have used an image for the popover to work. Should work with many tags, eg. etc.

The most important element is the data-remote="file-location + extension."

<img data-remote="/pages/Production/Wood.html" src="/sites/default/files/gif-items/Wood-40.png"/>

  $('*[data-remote]').on('mouseover', function () {
    var el = $(this);
//    console.log(el);
//    console.log('hello');
    $.get(el.data('remote'), function (html) {
      el.popover({
        content: html,
        html: true,
        placement: 'top auto',
      });

      el.popover('show');

      $(".popover").on("mouseleave", function () {
        var el = $(this);
        el.popover('hide');
      });

      el.popover().on("mouseleave", function () {
        var el = $(this);
        setTimeout(function () {
          if (!$(".popover:hover").length) {
            el.popover("hide")
          }
        }, 30);
      });
    });
  });