I'd like to have my Leaflet popup (tooltip) such that it appears outside the bounding div of the map, rather than it being hidden once it hits the map border.

I see zindex() as a tile layer method.

What about for tips/popups?


This is not possible using the standard popup in Leaflet. The reason for this is that the map is located a div element with the CSS-property set to overflow: hidden. The Leaflet popup is another div element within the map div. Broken down to the HTML of your map, your question becomes equivalent to this one on SO.

You could make a clone of the leaflet-popup-pane div and insert it somewhere outside of your map, but then you would need to make all the synchronisation manually, which is probably not what you want to get into.

A more feasible approach would probably be to place your popup information completely outside the map, something like in this jsFiddle. A click on the marker displays the popup information in the div.

| improve this answer | |
  • Your approach is good. However, I think Leaflet should have done like OpenLayers for pop-up, meaning that if the popup is going to be outside of viewport by top, when open, you just open it at the bottom of the feature, and so on. That would fix this kind of "issue". – Stranded Kid Sep 18 '15 at 20:05

This is possible. Just get the popup pane by it's classname and set the style:

            function setPopUpZIndex() {
            let paneCol = document.getElementsByClassName('leaflet-popup-pane')
            let paneToChange = paneCol[0];
            paneToChange.style.zIndex = 3000;
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.