How to keep leaflet tooltips within visible map view

Question

I have a map with panning and zooming disabled, creating a bounding box. This map has a geojson layer with features and tooltips displaying underlying data.

The issue is when the user mouses over features on the outer edges of the visible map area, the tooltips are outside of the div view. Because there's no panning enabled, the user is SOL to see the tip.

How can I keep the tips within the visible map view bound by extents?

Answer 1

Take a look at the keepView option of the Popup layer. My guess is when you set it to true instead of the default false it will keep the tooltip/popup visible within the current map extent.

However if you can post the code you're working on in a fiddle, it would be helpful to test whether my assumption is correct.

Answer 2

I have a similar case where user can not pan nor zoom, but still open popup.

Once you've zoomed on the data, you could do something like this :

var defaultBounds = map.getBounds();

then when a popup is opened, let the default popup panning go through (the map might be panned if the popup is outside viewport), and then, when the popup is closed

map.on("popupclose", function() {
    this.fitBounds(defaultBounds); // or yourLayer.getBounds() if you don't want to rely on "static" var
}, map);

This will pan back to original extent. I go with it and it's kinda fine.

Answer 3

To have the popups appear in the same position every time

I'm using the following CSS solution to fix the popup to always appear in the same place where I want it

<style>
    .leaflet-popup {
        transform: none !important;
        position: absolute;
        top: 600px !important;
        left: 20px !important;
    }
</style>

And then to keep the map from moving every time you click on a marker, set autoPan to false in the popup options (https://leafletjs.com/reference-1.6.0.html#popup-autopan) :

 { autoPan: false }