how to add a html title (tooltip) to a leaflet.js polygon?

Question

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

$(\'\').appendTo()         


        

Answer 1

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

Demo: https://jsfiddle.net/3v7hd2vx/91/

---

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

Updated demo: https://jsfiddle.net/3v7hd2vx/402/