Issue with Boostrap 4 popover click events and HTML

Question

I am running into an issue where when I apply the click attribute to the popover plugin, any html in it will render, but the marker will be offset/over the entire element. However, when you deactivate the marker and click it again, it works.

The markers are being created via jQuery, due to them flowing in from a CMS (WP). The markers will appear on screen when the user clicks a tab, that toggles their state. Each of these markers is tied to Bootstraps popover plugin. The popover does work, and activates, but the issue lies in what was stated initially; on first click it is off center, but 2nd click will position it correctly. Also scrolling will reset it's position correctly.

I'm not entirely versed in Javascript or jQuery to really grasp how to go about doing this. I am wondering if there is a way to trigger a hover event for all the markers I'm populating without it displaying to the user, so that when the user does click on a marker, it's in the right position.

I want to provide the full code possible to help debug, but I made this snippet instead which shows the issue:

https://www.bootply.com/22rGiLXVqh

Any help is appreciated.

EDIT: Noticed the inline code will run fine, but please be sure to click "Full Screen" to see the issue.

$('.marker').popover({
  html: true,
  trigger: 'click',
  placement: 'top',
  container: 'body'
});

$('body').on('click', function(e) {

  $('.marker').each(function() {

    if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.marker').has(e.target).length === 0) {
      $(this).popover('hide');
      !$(this).removeClass('tooltip-active');
    } else {
      $(this).addClass('tooltip-active');
      $(this).popover('show');
    }
  })
});

.i-map-overlays {
  position: relative;
}

.i-map-overlay-cell {
  height: 100vh;
  width: 100%;
  position: relative;
  z-index: 1;
}

#marker-1 {
  position: absolute;
  z-index: 2;
  top: 20%;
  left: 40%;
  background: blue;
  color: white;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">

  <div class="i-map-overlays">

    <!-- Multiple divs before this -->
    <div class="i-map-overlay-cell active" id="i-map-map_tenants">
      <img src="https://via.placeholder.com/1000x1000">

      <span id="marker-1" class="tenants-marker marker" data-title="BNSF Container Yard" data-content="<img src='https://via.placeholder.com/350x150' />">1</span>



    </div>

  </div>
</div>

Answer 1

Turns out the best course to this is just presetting a min-height and min-width or keeping a consistent canvas size for your images.