css problem! Details, God! _html/css_WEB-ITnose

Source of problem: Website applied to map. Icon marks are marked on certain longitudes and latitudes. When the mouse clicks on the corresponding mark, a prompt box will pop up as shown in Figure 1. The problem now is that when you click the fit icon on the upper edge of the map, the prompt box will be blocked as shown in Figure 2.
The question is: how to adjust it so that it fits on the edge so that the prompt box is displayed below the icon instead of above it. It can also be displayed correctly on the left and right edges.
Thanks!

Reply to discussion (solution)

The first js calculation position repositioning

The second method is to adjust the z-index of the prompt box

It would be better to relocate it to the middle

js obtains the upper distance of the trigger point Icon mark as the judgment condition. If the upper distance is insufficient, then Show down.