I am working with leafletMap using Vue2 application, I want to position my markers in different position on my desktop view. I have an idea but not sure if it will work, but thinking like, if I add min-zoom and max-zoom to my map application and then need to write some logic for positioning, but don't know exact how to implement it. Right now when I clicked then the popup is always on the top of the marker ( see below):

But I want the marker to be position on different direction depending on my markers. So If My marker is on right side of the map then the markers should popup at right corner and if marker is on Left side then Popup should open in left Corner. and if marker is too close of the Top map then the popup should open beneath/under the marker ( Similar to the image below):

And if my Marker is on the center the the popup should open above the MArker, As image below: