如何将HTML标题(工具提示)添加到leaflet.js多边形? [英] how to add a html title (tooltip) to a leaflet.js polygon?

问题描述

我有一个传单地图，我想在多边形中添加一个html标题(工具提示).如果我使用普通的JQuery:

I have a leaflet map and I would like to add a html title (tooltip) to my polygon. If I use plain JQuery:

$('<title>my tooltip</title>').appendTo()

标题已添加到DOM，但不可见.有关更多详细信息，请参见此处，但是如果我遵循该解决方案，我可以不再使用传单功能.

The title gets added to the DOM but is not visible. See here for more details but if I follow that solution, I can no longer use the leaflet features.

我还尝试了 leaflet.label 插件，但是标签会随着鼠标指针移动.我只希望标准的浏览器标题工具提示在悬停后不久出现在一个位置)

I also tried the leaflet.label plugin but the label moves around with the mouse pointer. I just want the standard browser title tooltip that appears in one position shortly after on hover)

感谢您的帮助

推荐答案

Leaflet 1.0.0具有新的内置 L.tooltip 类，该类弃用Leaflet.label插件.工具提示指向形状中心，并且不随鼠标移动.

Leaflet 1.0.0 has a new built-in L.tooltip class that deprecates the Leaflet.label plugin. The tooltip points at the shape center and does not move with the mouse.

L.polygon(coords).bindTooltip("my tooltip").addTo(map);

演示: https://jsfiddle.net/3v7hd2vx/91/

要解决OP关于在多边形中心显示工具提示的评论，当多边形很大且当前缩放比例很高时，该提示可能不可见，您可以使用

To address OP's comment about tooltip being displayed at the polygon center, which can be out of view when the polygon is very big and current zoom is high, you can use the sticky option:

L.polygon(coords).bindTooltip("my tooltip", {
  sticky: true // If true, the tooltip will follow the mouse instead of being fixed at the feature center.
}).addTo(map);

更新的演示: https://jsfiddle.net/3v7hd2vx/402/

这篇关于如何将HTML标题(工具提示)添加到leaflet.js多边形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！