Search code examples
openlayers

Strange overflow behaviour in OpenLayers v6.1.1 ol.Overlay

I'm using OpenLayers for a school project.

In my map, I load GeoJSON Point features as a VectorLayer on top of a base mapbox layer. The points represent buildings. When the points are clicked, an ol.Overlay tooltip is shown containing the name of the building.

When the tooltip is generated in the center of the screen, it looks great: Tooltip in center of screen

When I drag the map such that the point goes close to the right edge of the screen, the tooltip prevents the contents from overflowing, which is really neat: enter image description here

However when I try to do the same for the left edge of the screen, I don't get this behaviour, and instead the tooltip contents simply overflow:

enter image description here

Suppose the user were to click on a point that was close to the left edge of the screen. If the name of the building was long, the tooltip will be generated with half of it spilling out of the left edge of the screen, which is a little jarring.

May I know what properties I should set under ol.Overlay to fix this problem?

Thanks!

EDIT 1: Here is a JSFiddle that shows the behaviour. Try dragging the map such that the tooltip is near the right and left of the screen. https://jsfiddle.net/meeps/kosx7w9d/4/

Solution

  • Indeed, it is the CSS that is causing this.

    Issue

    demonstration of problem and accompanying CSS When the tooltip is up against the right side of the screen, we see that it has a positive left value.

    This "pushes" it against the right side of the screen and thus the text wraps as the tooltip tries to fit between left: 340px and the right side of the screen by decreasing its width.

    The tooltip is "squished" between left: 340px and the right side of the screen.

    demonstration of problem and accompanying CSS Now, we have the tooltip off the left side of the screen. Notice that it uses a negative left value left: -63px to achieve the appearance of being off the left side of the screen. Having this negative value "pulls" the tooltip off the screen so to speak. It thus isn't "squished" and is even being pulled to the left, hence it does not shrink its width and just goes off the screen.

    Solution

    solution So we can use a large right value right: 300px to push our tooltip into the left side of the screen and have it shrink its width to fit.

    You would want to have JavaScript to detect when to use left: and when to use right: values to position the tooltip when the user drags the map to get your desired behaviour on the tooltip.

    :D