Проблема с всплывающими событиями Boostrap 4 и HTML

Я сталкиваюсь с проблемой, когда при применении click Атрибут для плагина popover, любой HTML в нем будет отображаться, но маркер будет смещен / по всему элементу. Однако, когда вы деактивируете маркер и снова щелкнете по нему, он заработает.

Маркеры создаются с помощью jQuery, поскольку они поступают из CMS (WP). Маркеры появятся на экране, когда пользователь нажимает на вкладку, которая переключает их состояние. Каждый из этих маркеров привязан к плагину 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>

Источник

1 ответ

Оказывается, лучший способ для этого - просто установить минимальную высоту и минимальную ширину или сохранить постоянный размер холста для ваших изображений.

Источник
Другие вопросы по тегам