Getting popup bound to a polyline to appear onMouseover in react-leaflet

Question

I'm trying to get a polyline popup that opens on mouseover.

I've tried forcing the position props of the popup attribute with static values but that doesn't seem to affect anything. I'm unsure if its possible to set this value when its bound to another element. It seems to work if the popup is independantCode pen here

I know I can set a function to execute on mouseover as shown in this codepen.

<Polyline positions={positions}
          onMouseOver={(event) => null}
>

But I'm unsure how to make an event that interacts with this child component.

Using leaflet 1.4.0 react-leaflet 2.2.1 react 16.8.5 react-dom 16.8.5

Answer 1

In order to get the popup displayed once hovering over a polyline you need simply to call

<Polyline
    positions={positions}
    /*What should onMouseOver do?*/
    onMouseOver={e => e.target.openPopup()}>

Optionally add onMouseOut={e => e.target.closePopup()} to close the popup once hovering out

Demo