Conflict with D3.js - Mobile about leaflet.polylinedecorator HOT 1 OPEN

Hi Kristian.

I've taken a look at your StackOverflow post, but I can't see yet what's the problem. I'm not so sure it's because of polyline decorator, because it doesn't have any special event mechanism, but I may be wrong. Do you have more details on your side, like a console.log of events thrown, or something that could help the debugging? The fact that it appears only on mobile doesn't help testing it :|

If I had to make a guess, I would say that the successions of events is wrong, resulting in the tooltip being closed as soon as it gets displayed, like a mouseout is thrown directly after a mouseover. This is what I experienced on my device, I saw the first tooltip appearing very very briefly and then being hidden.

Also, by looking at your code I wonder why you use D3.js at all here, instead of native Leaflet elements. If you just need these round markers and a popup on hover/touch, you can probably do the same more simply with L.CircleMarker and a simple <div> you hide or show. This would simplify the code a lot (you don't have to translate elements yourself) and this would avoid two different systems of event (Leaflet and D3) from possibly conflicting.
Of course I don't know your project, maybe there are more complex animations coming after… So just ignore these comments if this is the case.

P.S.: I was there in holiday around Dubrovnik some years ago. Great memories :)

from leaflet.polylinedecorator.