openlayers - Openlayer6 popup box to auto position

Question

I have a map and some overlay to show the information of the location when map is loaded. I am using Openlayers6 and the below code is how I create the overlay with some content inside.

   var element = "<div id='popup1' class='ol-popup'> " + 
            "<div id='content1'></div>" + 
            "</div>";
    
    $("popupdiv").append(element);
    
    var overlay = new ol.Overlay({
        element: document.getElementById("popup1")
    });
    
    map.addOverlay(overlay);
    
    var content = "<div class='popup-main' <p>....[put some content here]....</p></div>";
    document.getElementById("content1").innerHTML = content;
    overlay.setPosition([some position indicated here]);

My issues is that as my popup content have quite alot of text inside and my map needs to scale to a small size map so I have problem displaying the popup content. I wonder is there any libraries or any suggestions to not let the popup content overlap each other, probably they can auto adjust the position of the popup when they overlap each other? I tried the ol.Overlay.Popup library and they do overlap each other when the map is zoom out, I wonder is there any ways to scale the popup text and box size and probably to know if any box is overlap, maybe they could auto switch position?

CSS

.popup-main{
   position: relative;
   display: table;
   min-width: 100px;
   width: auto;
}
.ol-popup{
   position: absolute;
   background-color: white;
   box-shadow: 0 1px 4px rgba(0,0,0,0.2);
   padding: 5px;
   border-radius: 10px;
   border: 1px solid #cccccc;
   bottom: 12px;
   left: -12px;
   min-width: auto;
}

question from:https://stackoverflow.com/questions/65897989/openlayer6-popup-box-to-auto-position

Answer 1

Waitting for answers