Mudando a posição do pop-up no marcador de folheto?

Quero abrir um pop-up na parte inferior do ícone do meu marcador no Leaflet.

meu 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();

Então, eu recebo um pop-up em cima do meu marcador.

Quero obter um pop-up na parte inferior como:

Não existe solução de folheto nativo.

Uma outra maneira é usar https://github.com/erictheise/rrose

Nice Demo:

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

Você pode especificar as compensações usando as popupAnchoropções, mas não onde você esperaria. Primeiro, você precisa especificar um ícone como este:

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

Você pode usar este ícone nas opções do seu marcador:

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

Agora seu pop-up abre 30 px acima do seu marcador. Isso não é exatamente o que você pediu, pois também precisa colocar o pequeno triângulo de flecha no topo do seu pop-up, mas acho que ainda vale a pena mencionar.

Sei que essa é uma pergunta antiga, mas você não precisa fazer o desvio @Robert descrito em sua resposta.

Como Popupestá herdando DivOverlay, você pode definir a opção de deslocamento diretamente ao inicializar o Popup:

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

Leia os documentos: https://leafletjs.com/reference-1.5.0.html#popup

Isso parece ser possível apenas em CSS. Abaixo, estou substituindo (com !important) apenas três elementos CSS e adicionando um :beforepseudo-elemento. Estou essencialmente alinhando o pop-up com a parte superior em vez da inferior , onde 55px depende apenas do marcador escolhido e do gosto pessoal.

Em seguida, movo a "dica" do pop-up da mesma forma de baixo para baixo top:0pxe descobri que ela não foi criada usando o truque "normal" (ou seja: primeira posição na borda da bolha, um pseudoelemento do tamanho 0x0 com uma borda transparente grossa e depois pintei borda oposta do elemento de onde você deseja apontar; no nosso caso, a borda inferior). Em vez disso, parece ser feito de um retângulo girado de algum lugar no canto superior esquerdo (talvez: porque força o navegador a usar a GPU e, portanto, acelera tudo?) E eu não entendi bem (desculpe o trocadilho) o suficiente ( minha dica está no lugar certo, mas invisível); então apenas removo a sombra da caixa que está no lugar errado e deixo tudo como está - quem entende a "dica antiga", ajuste-a.

Então, em vez disso, faço minha própria dica, com o processo "normal" (se não tiver certeza, altere as quatro cores da borda abaixo, em vez de 3x transparente e 1x branco --- por exemplo 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 este JSFiddle demonstra, não há problema com tamanhos de pop-up diferentes (largura diferente, altura de texto diferente) se você tentar os dois marcadores.

Tudo isso parece robusto em relação às atualizações no Leaflet, pois os itens que estou substituindo provavelmente não mudam.