javascript - 屏幕上出现多个弹出器时重叠

Question

我需要同时在页面上显示多个 popper 元素。但问题是当它们中的两个彼此靠近时会出现重叠。有没有办法解决这个问题？

我在下面给出了与 popper 元素相关的代码。

我在传单中使用tippy.js。传单图像的特定坐标中有标记。当点击这些标记时，我想在tippies 中显示一些html 内容。当我想同时显示多个小费时，问题就开始了。谢谢你的帮助。

var data = [
  {
    latLng: [160, -100],
    tippyContent: document.getElementById('exampleTable1').innerHTML,
  },
  {
    latLng: [240, 100],
    tippyContent: document.getElementById('exampleTable1').innerHTML,
  }
];

var map = L.map('map', {
  crs: L.CRS.Simple,
  minZoom: 0,
  maxZoom: 0,
  zoomControl: false,
  dragging: false,
  attributionControl: false,
  autoPan: false
});

    map.scrollWheelZoom.disable();
map.doubleClickZoom.disable();

var yx = L.latLng;

var xy = function (x, y) {
  if (L.Util.isArray(x)) {    // When doing xy([x, y]);
    return yx(x[1], x[0]);
  }
  return yx(y, x);  // When doing xy(x, y);
};

var bounds = [xy(-120, -300), xy(120, 300)];
var image = L.imageOverlay('https://static8.depositphotos.com/1022400/1002/i/950/depositphotos_10024914-stock-photo-vertical-beach.jpg', bounds).addTo(map);

var markers = [];
data.forEach(function (element, index) {
  markers[index] = L.marker(element.latLng, {
    draggable: false,
    autoPan: false,
  }).addTo(map);
});
map.setView(xy(0, 0), 1);

data.forEach(function (element, index) {
  tippy(markers[index]._icon, {
    content: element.tippyContent, // diğer tippy metotları da eklenebilir.
    trigger: 'mouseenter click',
    allowHTML: 'true',
    hideOnClick: 'toggle',
    maxWidth: 'none',
    interactive: 'true',
    placement: 'auto',
    appendTo: document.body,
  });
});
function showAllMarkersTippies() {
  hideAllMarkersTippies();
  markers.forEach(function (marker) {
    marker._icon.click();
  });
}

function hideAllMarkersTippies() {
  markers.forEach(function (marker) {
    marker._icon._tippy.hide();
  });
}

#map {
  height: 660px;
}
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  color:#333333
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 5px;
}

tr {
  background-color: #fff;
}

<link href="https://github.com/mapshakers/leaflet-icon-pulse/blob/master/src/L.Icon.Pulse.css" rel="stylesheet"/>
<link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2.4.4/dist/umd/popper.min.js"></script>
<script src="https://unpkg.com/tippy.js@6.2.6/dist/tippy-bundle.umd.js"></script>
<script src="https://raw.githubusercontent.com/mapshakers/leaflet-icon-pulse/master/src/L.Icon.Pulse.js"></script>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>

<button type="button"
        class="btn btn-secondary ml-3 pull-right"
        onclick="hideAllMarkersTippies()">Hide All</button>
<button type="button"
        class="btn btn-secondary ml-3 pull-right"
        onclick="showAllMarkersTippies()">Show All</button>
<div id="exampleTable1" style="display:none;">
  <table>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
    <tr>
      <td>Alfreds</td>
      <td>Maria</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro com</td>
      <td>Francisco</td>
      <td>Mexico</td>
    </tr>
  </table>
</div>
<div id="map"></div>

结果图像如下所示。