Question

0

How to toggle popup in react-leaflet on mouse hover

rated 0 times [ 1] [ 1] / answers: 1 / hits: 11598 / 6 Years ago, thu, august 2, 2018, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ciarajourneyv

Add To Favorites

Follow

Total Points: 428

Total Questions: 95

Total Answers: 90

Location: Maldives

Member since Sat, Feb 11, 2023

1 Year ago

answered 6 Years ago pranavrorys · Accepted Answer

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