首页 / Leaflet / API 文档

Tooltip

先看结论

附着在图层或坐标上的轻量提示框，没有关闭按钮，也不自动平移地图。

最后验证 2026-11-03 · Leaflet 1.9.4 · 更新 2026-10-28 · 引用本文

L.tooltip(options, source?) → Tooltip

参数

参数	类型	说明
`options`	Object	位置、方向、内容与样式选项
`source`	Layer	可选，绑定的宿主图层；一般用 `layer.bindTooltip` 更省事

选项

选项	默认值	说明
`pane`	'tooltipPane'	所在 pane，默认层级 650
`offset`	[0, 0]	相对锚点的像素偏移
`direction`	'auto'	`'top'` / `'bottom'` / `'left'` / `'right'` / `'center'`，auto 自动避让边缘
`permanent`	false	常驻显示，不随鼠标移出消失
`sticky`	false	跟随鼠标移动，只在 `mousemove` 时生效
`opacity`	0.9	整体不透明度
`interactive`	false	是否响应鼠标事件；为 false 时不吃点击
`className`	''	附加 class，用于自定义外观

成员

成员	返回值	说明
`setLatLng(latlng)`	this	移动提示位置
`setContent(content)`	this	替换 HTML 内容
`getContent()`	String / HTMLElement	读取当前内容
`openOn(map)`	this	在地图上打开，不绑定宿主
`getElement()`	HTMLElement	打开后的 DOM 节点，用于测尺寸
`layer.bindTooltip(content, options)`	this	由图层调用，绑定后悬停显示
`layer.unbindTooltip()`	this	解除绑定

var marker = L.marker([39.907359, 116.391263]).addTo(map);

marker.bindTooltip('天安门 · 客流 2.4 万/日', {
  direction: 'top',
  offset: [0, -14],
  opacity: 1
});

/* 常驻提示：适合标注名称，不需要鼠标悬停 */
L.circleMarker([39.9147, 116.4106], { radius: 6, fillOpacity: 0.9 })
  .bindTooltip('王府井', { permanent: true, direction: 'right', className: 'label-fixed' })
  .addTo(map);

/* 跟随鼠标的要素提示 */
map.on('mousemove', function (e) {
  tip.setLatLng(e.latlng).setContent(e.latlng.lat.toFixed(4) + ', ' + e.latlng.lng.toFixed(4));
});
var tip = L.tooltip({ sticky: true }).openOn(map);

提示与气泡不是一套东西。Tooltip 没有关闭按钮、不自动平移到视野内，适合悬停查看；需要标题、关闭按钮、点击后保持打开的用 bindPopup。

同一图层同时绑定 popup 和 tooltip 时，点击会打开 popup，悬停仍是 tooltip，两者互不冲突。但 tooltip 设 permanent: true 后再绑 popup，移动端点击容易被常驻提示挡住，此时可把 tooltip 的 interactive 保持 false，并在样式里加 pointer-events: none。

引用本文

经纬志（2026）。《Tooltip》。https://www.jingweizhi.com/leaflet/api/tooltip.html（访问日期 2026-11-03）。