leaflet Js custom control button add (text, hover)

Question

I followed this control-button-leaflet tutorial and it worked for me. Now I want to:

1. show some text when i hover over the button (like with the zoom buttons)

Answer 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