Changing popup position on Leaflet marker?

You can specify the offsets by using the popupAnchor options, but not where you would expect it. First, you need to specify an icon like this:

var myIcon = L.divIcon({ popupAnchor: [0, -30] });

You can then use this icon in your marker options:

var marker = L.marker(location, {
                 icon: myIcon
             }).bindPopup(function (marker) {...}); //Shortened

Now your popup opens up 30 px above your marker. This is not exactly what you asked for as you also need to place the little arrowish triangle on the top of your popup, but I think it's still worth mentioning.

There is no native leaflet solution.

One other way is use https://github.com/erictheise/rrose

Nice Demo:

http://jsfiddle.net/asleepwalker/6m81vtad/

I know that this is an old question, but you do not need to take the detour @Robert described in his reply.

As Popup is inheriting from DivOverlay, you can set the offset option directly when initializing the Popup:

    var popup = L.popup({
        offset: [0, -30]
    })
      .setLatLng(location)
      .setContent("Test Text")
      .openOn(mapId);

Read the docs: https://leafletjs.com/reference-1.5.0.html#popup