Overlapping when multi poppers are appeared on the screen

Question

I need to show multi popper elements on the page at the same time. But the problem is that there is an overlapping when two of them are close to each other. Is there a way to solve this?

I give my code which is related to popper elements below.

I use tippy.js inside leaflet. There are markers in specific coordinates of the leaflet image. And I would like to show some html content inside tippies when clicked to these markers. The problem starts when I wanna show multi tippies at the same time. Thanks for your help.

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>

Result image is shown below.