Bootstrap 4 弹出窗口点击事件和 HTML 问题

Question

我运行遇到一个问题，当我将 click 属性应用于 popover 插件时，其中的任何 html 都会呈现，但标记将是 offset/over 整个元素。但是，当您停用标记并再次单击它时，它会起作用。

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

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

我想提供完整的代码来帮助调试，但我制作了这个显示问题的片段：

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

感谢任何帮助。

编辑：注意到内联代码运行没问题，但请务必点击 "Full Screen" 查看问题。

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

事实证明，最好的办法就是预设最小高度和最小宽度，或者为图像保持一致的 canvas 大小。

Bootstrap 4 弹出窗口点击事件和 HTML 问题

Issue with Boostrap 4 popover click events and HTML

javascript

jquery

popover

bootstrap-popover

bootstrap-4