¿Cambiar la posición emergente en el marcador de folleto?

Quiero abrir una ventana emergente en la parte inferior del icono de mi marcador en el folleto.

mi código:

var mymap = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpandmbXliNDBjZWd2M2x6bDk3c2ZtOTkifQ._QA7i5Mpkd_m30IGElHziw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

var lati = 51.51;
var longi = -0.09;

var popupLocation1 = new L.LatLng(lati, longi);
var popupContent1 = 'This is a nice popup';

popup1 = new L.Popup();
popup1.setLatLng(popupLocation1);
popup1.setContent(popupContent1);

var m1 = L.marker([ lati, longi ]).addTo(mymap);

m1.bindPopup(popup1);

m1.openPopup();

Entonces aparece una ventana emergente en la parte superior de mi marcador.

Quiero obtener una ventana emergente en la parte inferior como:

Puede especificar los desplazamientos utilizando las popupAnchoropciones, pero no donde lo esperaría. Primero, debe especificar un icono como este:

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

Luego puede usar este icono en sus opciones de marcador:

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

Ahora su ventana emergente se abre 30 px por encima de su marcador. Esto no es exactamente lo que pediste, ya que también debes colocar el pequeño triángulo de flecha en la parte superior de tu ventana emergente, pero creo que aún vale la pena mencionarlo.

No existe una solución de folletos nativa.

Otra forma es usar https://github.com/erictheise/rrose

Buena demostración:

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

Sé que esta es una vieja pregunta, pero no es necesario tomar el desvío @Robert descrito en su respuesta.

Como Popupse hereda de DivOverlay, puede establecer la opción de desplazamiento directamente al inicializar Popup:

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

Lea los documentos: https://leafletjs.com/reference-1.5.0.html#popup

Esto parece ser posible solo en CSS. A continuación, anulo (con !important) solo tres elementos CSS y agrego un :beforepseudo-elemento. Básicamente, primero estoy alineando la ventana emergente con la parte superior en lugar de la inferior , donde 55px solo depende del marcador elegido y el gusto personal.

Luego muevo la "punta" de la ventana emergente de manera similar desde abajo hacia abajo top:0px, y descubro que no está hecha con el truco "normal" (es decir: primero coloca en el borde de la burbuja un pseudo-elemento de tamaño 0x0 con un borde transparente grueso, luego colorea ese borde opuesto del elemento de donde desea apuntar; en nuestro caso, el borde inferior). En cambio, parece estar hecho de un rectángulo girado desde algún lugar en la parte superior izquierda (tal vez: ¿porque obliga al navegador a usar la GPU y, por lo tanto, acelera todo?) Y no entiendo el punto (perdón por el juego de palabras) lo suficientemente bien ( mi punta está en el lugar correcto pero invisible); así que simplemente elimino la sombra de la caja que ahora está en el lugar equivocado y la dejo como está --- cualquiera que entienda el "viejo consejo" por favor, ajústelo.

Entonces, en cambio, hago mi propio consejo, con el proceso "normal" (si no está seguro, cambie los cuatro colores de borde a continuación, en lugar de 3x transparente y 1x blanco --- por ejemplo border-bottom-color: blue; border-left-color: green; border-top-color: yellow' border-right-color: red).

#map {
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   bottom: 0;
   z-index: 0;
}
.leaflet-popup {top: 55px !important;}
/* Here I move the "tip" to the right location, but didn't succeed in making it visible. So I just remove the box-shadow and leave it: */
.leaflet-popup-tip-container {
   top: 0px !important;
}
.leaflet-popup-tip {
   box-shadow: none !important;
}
.leaflet-popup:before 
    {
    content: "";
    position: absolute;
    border: 13px solid transparent;
    border-bottom-color: white;
    bottom: 0px;
    margin-left: -13px;
}

Como lo demuestra este JSFiddle , no hay problema con diferentes tamaños de ventanas emergentes (ancho diferente, altura de texto diferente) si prueba ambos marcadores.

En general, esto parece robusto frente a las actualizaciones en el folleto, ya que los elementos que estoy anulando no parecen cambiar.