屏幕上出现多个弹出框时出现重叠

如何解决屏幕上出现多个弹出框时出现重叠

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

我在下面提供与popper元素相关的代码。

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

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

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>

结果图像如下所示。