如何在带有可点击内容的悬停事件上打开弹出窗口

Question

i am currently working with leaflet.

and i am trying to create a popup with with clickable content.

now i found how i can bind popups on click event with content:

marker.on('click', function(e){
     marker.bindPopup("<div />").openPopup();
}

and i found out how to create the popup on hover:

marker.on('mouseover', function(e){
    e.target.bindPopup("<div />").openPopup();

    }});        

marker.on('mouseout', function(e){  
    e.target.closePopup();

}});

now what i cant seem to do is make the popup stay open in order for the user to click on links inside the popup. i would appreciate any help.

Answer 1

one approach is this http://jsfiddle.net/cxZRM/98/ basically it's adding a timer to your setup and you only close the popup after an arbitrarily long time has passed so as to give the user some time to interact on your div.

marker.on('mouseover', function(e){
    e.target.bindPopup("dsdsdsdsd").openPopup();
    start = new Date().getTime();
  });        

marker.on('mouseout', function(e){  
    var end = new Date().getTime();
    var time = end - start;
    console.log('Execution time: ' + time);
    if(time > 700){
    e.target.closePopup();
    }
});

a better approach would be to use http://jsfiddle.net/AMsK9/ to determine your mouse position and keep the popup open while the mouse is still within an area around the popup.

Answer 2

I had the same issue, I wanted a different pop up for mouseover and another one for click, and the problem was that when I hovered out the click pop up closed, so what I did was adding a flag:

var modal = true;    
function onEachFeature(feature, Polygon) 
    {
        if (feature.properties && feature.properties.popupContent && feature.properties.modal) 
        { 
            Polygon.on('mouseover', function (e) {
              Polygon.bindPopup(feature.properties.popupContent);
              this.openPopup();
              modal = false;
            });
            Polygon.on('mouseout', function (e) {

                if(!modal)
                this.closePopup();
            });
            Polygon.on('click', function (e) {
                modal = true;
                Polygon.bindPopup(feature.properties.modal).openPopup();
            });

        }
    }