I have made several custom buttons in Leafletjs - now I would like to add a hover-over tooltip to explain what the button does. I've tried putting a "title:" and "tooltip:" in the options but still do not see the text when I hover over the control.
var load = L.Control.extend({
options: {
position: 'topright'
},
onAdd: function(map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-load-points');
//container.style.backgroundColor = 'white';
container.style.width = '25px';
container.style.height = '25px';
container.onclick = function() {
clear_markers(markers);
load_markers(markers);
}
return container;
},
});
To answer my own question I was using the wrong approach to add the title option. By creating the container first and then setting the title after I was able to populate the title field and have a tooltip work on hover over.
var load = L.Control.extend({
options: {position: 'topright'},
onAdd: function(map) {
var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-load');
container.title = "Enter Tooltip Here"
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With