I am using easybutton plugin for leaflet. Is there a possibility to display an image+some text when mouse is over on the button?

Here is my current code:

 var btn2 = L.easyButton ({position: 'topright', 
  states: [{
    stateName: 'NoSources2',
    icon:'<img src=ico/closed_eye.png height="16" width="16"><span>   masquer le nombre de resources</span>',
      title: 'NoSources' ,
      onClick: function(control) {
     stateName: 'NoSources1',
    icon: '<img src=ico/oeil.jpg height="16" width="16"><span>   voir le nombre de resources</span>',
    title: 'NoSources',
    onClick: function(control)  {

1 Answer 1


The following describes a method for a mouseover image for an easybutton.

(1) Add an id to your easybutton:

var btn2 = L.easyButton ({position: 'topright', id:'sbut',

(2) Add event listeners to your button which call the mover and mout functions:

document.getElementById("sbut").addEventListener("mouseover", mover);
document.getElementById("sbut").addEventListener("mouseout", mout);

(3) Add to your HTML an image, substituting in the image {IMGURL}:

<div class "container">
    <div class "picture">
        <img alt="n e image" id="neimage" style="display: none" src="{IMGURL}"/>

(4) create the function mover to display the image at mouse coords; note as your button is top right then the image width is subtracted to get it to display with the NE corner at mouse position:

function mover(event){
    var x = event.clientX;
    var y = event.clientY;    
    var img = document.getElementById('neimage');
    img.style.display = '';
    img.style.position = 'fixed';
    img.style.left = x - img.width + 'px';
    img.style.top = y + 'px';    
    img.style.zIndex = 1000;

(5) create the function mout which will remove the displayed image when the mouse leaves the button:

function mout (event){
    document.getElementById('neimage').style.display = 'none';


display image position based on mouse click coordinates


image dimensions

image z index

  • Thank you for extensive explanation, but I could not make it worked out. In case I am missing a point: is it something you already tested in some work? @JimT
    – Gamze
    Commented May 17, 2017 at 13:46
  • yes - tested as working in Chrome. Have you tried checking the console for error messages?
    – JimT
    Commented May 17, 2017 at 14:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.