Question

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

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

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

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

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

找出最好的方法就是为此预先设置最小高度和最小宽度或为图像保留一致的画布大小。

Boostrap 4 popover点击事件和HTML的问题

1 个答案: