CODEWITHSUNDEEP
javascriptreactjsreact-leaflet
Belal El-Monajjed
Belal El-Monajjed

Reputation: 91

How to toggle popup in react-leaflet on mouse hover

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.

Upvotes: 6

Views: 12911

Answers (2)

Silviu Burcea
Silviu Burcea

Reputation: 5348

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.

Upvotes: 3

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59368

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

Upvotes: 15

Related Questions