Here's a simple demonstration: The file leaflet.draw-src.js was downloaded here: https://github.com/Leaflet/Leaflet.draw/tree/master/dist
If you remove the script tag with the leaflet.draw-src.js the tooltip work just fine, but when added the leaflet.draw it gives the error Cannot read property 'popupPane' of undefined.
ps: Not using leaflet-draw is not an option
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<!-- got it from here https://github.com/Leaflet/Leaflet.draw/tree/master/dist -->
<script src="leaflet.draw-src.js"></script>
<style type="text/css">
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
#map-canvas {
position: relative;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<script type="text/javascript">
var map = L.map('map-canvas').setView([-18, -52], 4);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: "Map data © <a href='http://openstreetmap.org'>OpenStreetMap</a> contributors, <a href='http://creativecommons.org/licenses/by-sa/2.0/'>CC-BY-SA</a>.",
maxZoom: 18
}).addTo(map);
var marker = new L.Marker(L.latLng(-18, -52), {
icon: new L.icon({
iconUrl: 'https://unpkg.com/[email protected]/dist/images/marker-icon.png',
iconSize: [32, 32],
iconAnchor: [16, 32]
})
}).addTo(map);
marker.bindTooltip("derp", {permanent: true});
</script>
</body>
</html>
