Bootstrap 4 弹出框点击事件和 HTML 的问题

Question

我遇到了一个问题，当我将 click 属性应用于弹出框插件时，其中的任何 html 都会呈现，但标记将偏移/覆盖整个元素。但是，当您停用标记并再次单击它时，它会起作用。

标记是通过 jQuery 创建的，因为它们是从 CMS (WP) 流入的。当用户单击选项卡时，标记将出现在屏幕上，从而切换其状态。这些标记中的每一个都与 Bootstraps popover 插件相关联。弹出框确实可以工作并激活，但问题在于最初所说的内容；第一次点击它偏离中心，但第二次点击会正确定位它。滚动也会正确重置它的位置。

我并不完全精通 Javascript 或 jQuery，无法真正掌握如何去做。我想知道是否有一种方法可以为我正在填充的所有标记触发悬停事件而不向用户显示它，以便当用户单击标记时，它位于正确的位置。

我想提供可能的完整代码来帮助调试，但我做了这个 sn-p 代替它显示了问题：

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

感谢任何帮助。

编辑：注意到内联代码可以正常运行，但请务必点击“全屏”查看问题。

$('.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

事实证明，最好的方法是预先设置最小高度和最小宽度，或者为您的图像保持一致的画布大小。