How to toggle popup in react-leaflet on mouse hover

Question

I tried everything I found on google and I can't figure out how to trigger the popup.

<Marker
  position={this.props.position}
  onMouseOver={() => { openPopup() }}
  onMouseOut={() => { closePopup() }}
>
  <Popup>
     "HI"
  </Popup>
</Marker>

Note: I know I can't trigger the function openPopup there its just to show where I want to implement the trigger function to toggle the popup on mouse hover.

Can someone please help, Thanks.

Nordic

Answer 1

Leaflet Marker object is accessible via event.target property of mouseover and mouseout events, so popup could be opened/closed like this:

<Marker
    position={position}
    onMouseOver={(e) => {
      e.target.openPopup();
    }}
    onMouseOut={(e) => {
      e.target.closePopup();
    }}
  >
    <Popup>Sydney</Popup>
  </Marker>

Demo

Autism

Answer 2

Using React Leaflet v3, the solution is easier and cleaner, use Tooltip instead of Popup, e.g.:

<Marker position={this.props.position}>
  <Tooltip>I appear on mouse over</Tooltip>
</Marker>

In particular, I have found useful to also add sticky property for Tooltip. There are more examples for tooltips in the documentation, which covers basic tooltips, sticky tooltips or permanent tooltips, with offsets and many more.

Dorothi

unfortunately there is no autoPan option for the Tooltip – Moltke

@Moltke you can always open a PR, react-leaflet is an active project :) – Dorothi