OpenLayers v6.1.1 ol.Overlay中奇怪的溢出行为

我正在为一个学校项目使用OpenLayers

在我的地图中，我将

GeoJSON

点要素作为

VectorLayer

加载到基本

mapbox

层之上。这些点代表建筑物。单击点时，将显示包含建筑名称的

ol.Overlay

工具提示

当在屏幕中央生成工具提示时，它看起来很棒：

当我拖动地图，使点靠近屏幕的右侧边缘时，工具提示会防止内容溢出，这非常整洁：

但是，当我尝试对屏幕的左侧边缘执行相同操作时，我没有得到这种行为，相反，工具提示内容只是溢出：

假设用户要单击靠近屏幕左边缘的点。如果建筑物的名称很长，将生成工具提示，其中一半溢出屏幕的左边缘，这有点刺耳

我可以知道我应该在

ol.Overlay

下设置什么属性来解决这个问题吗

谢谢

---

编辑1：下面是一个显示行为的JSFIDLE。尝试拖动地图，使工具提示位于屏幕的左右两侧

事实上，正是CSS导致了这种情况

问题 当工具提示位于屏幕右侧时，我们会看到它的左正值

当工具提示试图通过减小宽度在

左侧：340px

和屏幕右侧之间进行调整时，该会将其推到屏幕右侧，因此文本会自动换行

工具提示在

左侧：340px

和屏幕右侧之间“挤压”

现在，我们在屏幕左侧有了工具提示。请注意，它使用负的左值

left:-63px

来实现屏幕左侧的外观。使用此负值可以说会将工具提示从屏幕上“拉出”。因此，它不会被“挤压”，甚至会被向左拉，因此它不会缩小宽度，只是离开屏幕

解决方案 因此，我们可以使用一个较大的右值

right:300px

将工具提示推到屏幕的左侧，并使其缩小宽度以适应需要

当用户拖动地图以在工具提示上获得所需行为时，您需要使用JavaScript来检测何时使用

left:

以及何时使用

right:

值来定位工具提示

---

：D

它可能与覆盖库用于提示的元素的css有关-我将在主repo上打开一个Github问题，因为样式是由库执行的，除了自己编辑源代码之外，我无法控制它。谢谢-我将在主repo上打开一个Github问题，因为位置样式是由覆盖容器上的库执行-除了编辑源代码之外，没有其他方法可以更改此行为。