Leaflet Js Custom Control Button Add (text, Hover)

I followed this control-button-leaflet tutorial and it worked for me. Now I want to: show some text when i hover over the button (like with the zoom buttons) Change the color of t

Solution 1:

It seems you more need a Button than a div:

var container = L.DomUtil.create('input');
    container.type="button";

1. Then you can easily set a mouseover text:

   container.title="No cat";

2. And some Text instead of an image:

   container.value = "42";

3. And you can use the mouse events to style the button:

   container.onmouseover = function(){
     container.style.backgroundColor = 'pink'; 
   }
   container.onmouseout = function(){
     container.style.backgroundColor = 'white'; 
   }
   

(you could of course do this last part with css, might be more elegant)

Full example: http://codepen.io/anon/pen/oXVMvy