How to add html header (tooltip) to polygon sheetlet.js?

Question

I have a leaflet map and I would like to add the html (tooltip) header to my polygon. If I use simple jQuery:

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

The title is added to the DOM but not displayed. See here for more details, but if I follow this decision, I can no longer use the flyer features.

I also tried the leaflet.label plugin, but the label is moved using the mouse pointer. I just want the standard browser header tooltip to appear in one position right after hovering)

thanks for the help

Answer 1

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

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

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

---

To address the OP comment about the tooltip displayed in the center of the polygon, which may not be visible when the polygon is very large and the current scale is high, you can use sticky :

 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/