Open Leaflet Popup at bottom of marker

You have to provide the marker a customized Icon. You can use the same image, but you have to tweak the popupAnchor property to do that. See for reference http://leafletjs.com/reference.html#icon and http://leafletjs.com/examples/custom-icons.html

In your case you'll have to do (considering the default icon is 25 x 41 px, iconAnchor could be 12 x 40)

var yourIcon = L.icon({ popupAnchor: [0,0] });
var marker= L.marker([item.Lat, item.Long],{icon: yourIcon})

And the popup will open exactly at the same place of the position where the icon is anchored.


There is no option for that ...

However, if your purpose is to display visible popups without moving the map, you can have a look at this Leaflet plugin: http://erictheise.github.io/rrose/

It will open the popup south from the marker if the marker is too north ...


alright so I've been struggling to figure this out myself but I had figured out setting the position to relative will make the popup appear below the marker,

.leaflet-popup {
    position: relative;
    text-align: center;
}

You might also want to rotate the tip of the popup.

.leaflet-popup-tip-container {
width: 40px;
height: 20px;
position: relative;
left: 50%;
top: -117px;
margin-left: -20px;
overflow: hidden;
pointer-events: none;
transform: rotate(180deg);
}