I have a leaflet map where I'm dynamically adding markers.
I want to call the popup for a marker when I hover over it in addition to when I click the marker.
My code is:
function makeMarker(){
var Marker = L.marker...
Marker.on('mouseover', function(){Marker.bindPopup('HI').openPopup();});
Marker.on('mouseout', function(){Marker.closePopup();});
}
If I comment out the mouseout line, then the popup appears but then I have to click elswhere to close it. The problem is when I put in the mouseout, at that point, the cursor kinda flickers when it hovers over the marker and nothing shows. I think that the popup is openning but then closing really fast which is why the cursor flickers but I don't know how to fix this
The mouseover event occurs when a mouse pointer comes over an element, and mouseout – when it leaves. These events are special, because they have property relatedTarget . This property complements target . When a mouse leaves one element for another, one of them becomes target , and the other one – relatedTarget .
The mouseout event is fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children.
on( "mouseover", handler ) in the first two variations, and . trigger( "mouseover" ) in the third. The mouseover event is sent to an element when the mouse pointer enters the element. Any HTML element can receive this event.
The mouseover event is fired at an Element when a pointing device (such as a mouse or trackpad) is used to move the cursor onto the element or one of its child elements.
The popup is actually loading underneath the cursor and 'stealing' the mouse from the Marker, triggering the Marker.mouseout() event, which causes the popup to close and re-triggers the Marker.mouseover() event... and the cycle continues which is why you see the 'flicker'.
I have seen this happen depending on the zoom level (usually when zoomed right out).
Try adding an offset into your popup options to get it out of the way:
function makeMarker(){
var Marker = L.marker...
Marker.on('mouseover', function(){Marker.bindPopup('HI', {'offset': L.point(0,-50)}).openPopup();});
Marker.on('mouseout', function(){Marker.closePopup();});
}
I know it's an old thread but I've just came across this issue and I thought that I can share my solution. Instead of offsetting the popup, I am preventing the popup from stealing the mouse event using CSS by setting:
.my-popup {pointer-events: none;}
and assigning my-popup className to the popup:
Marker.on('mouseover', function () {Marker.bindPopup('HI', {className: 'my-popup'}).openPopup();})
I hope this helps someone :)
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