I have a popup that is opened when the user hovers over a marker. Currently, the popup closes when the user hovers over it (for example, the user can't select the text inside the popup because it closes). I'm trying to fix this and I found a great way to do it, as you can see here:
http://jsfiddle.net/sowelie/3JbNY/
Although the solution works, the version of Leaflet that it is used in that fiddle is very old, so I updated the version of Leaflet to version 1.1.0 and that breaks the solution 90% of the times.
Here are two fiddles, the first one is the same as the working solution with old Leaflet but I added one console.log. The second one also has the console.log but it uses Leaflet 1.1.0.
Old one: http://jsfiddle.net/3JbNY/106/
New one: http://jsfiddle.net/3JbNY/105/
Notice that 100% of the times, the old solution always logs the correct relatedTarget element, which is the popup (of course, when you exit from the marker to the popup. If you exit from the marker to the map, it's not going to be the popup).
However, on the same solution with the new version of Leaflet, 90% of the times the relatedTarget is not the popup even if you're exiting to the popup all the time. This percentage is arbitrary, I didn't actually calculate it, what I mean is that if you try long enough, eventually the new solution will log the popup as the relatedTarget but that is very rare.
I want to know what is the correct behavior here. In my opinion, it should work as the old solution works: giving me the correct element where I'm exiting to, that way I can check if I'm exiting to the popup to not close it if that's the case. Why was that changed?
Is there any workaround to get the correct relatedTarget without relying on maybe the Leaflet team patching this? Or maybe a completely new solution that doesn't rely on relatedTarget?
I appreciate the help!
Edit: Title said mouseover but I meant mouseout.
Found the culprit. Some Leaflet classes have a CSS property called pointer-events set to none, check out what it does here. Because of this, the event on the popup was being ignored. So I fixed this by simply overriding the property to the auto value (in my case it was the leaflet-tooltip class, but they have a similar class to popups called leaflet-popup-tip-container).
Check out this issue on Leaflet's GitHub for more information: https://github.com/Leaflet/Leaflet/issues/5720.
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