Popups and tooltips
Quick answer
This tutorial distinguishes Leaflet Popup from Tooltip by trigger, default style and how many can stay open, then binds both to markers, circles and raw coordinates. It covers autoClose, autoPan, maxWidth, offset and direction, permanent and sticky tooltips, and refreshing an open popup with setContent followed by update(). Readers can place readable callouts without breaking layout or leaking memory.
Key points
- Bind with bindPopup or bindTooltip, or open a standalone L.popup().setLatLng.
- Call popup.update() after setContent so the size and arrow are recalculated.
- Use permanent and sticky options on tooltips for always-on labels that follow the cursor.
Example
var marker = L.marker([39.907359, 116.391263]).addTo(map);
marker.bindPopup(
'<b>天安门</b><br>东经 116.391263，北纬 39.907359',
{ maxWidth: 260, autoPan: true }
);
L.popup()
.setLatLng([39.916345, 116.397155])
.setContent('<p>王府井</p>')
.openOn(map);var popup = L.popup()
.setLatLng([39.907359, 116.391263])
.setContent('加载中…')
.openOn(map);
fetch('/api/station/42')
.then(function (r) { return r.json(); })
.then(function (data) {
popup.setContent(
'<h4>' + data.name + '</h4><p>客流：' + data.flow + '</p>'
);
popup.update(); // 重算尺寸与箭头位置
});Notes
- Popup content is inserted as HTML, so escape any text that comes from the API.
- Polygon popups land on the geometric center, which can fall outside a narrow shape.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Popups and tooltips. https://www.jingweizhi.com/en/leaflet/tutorials/popup-tooltip.html (accessed 2026-11-03).