1

Im having an issue in react-leaflet when i try to use an eventHandlers in the popups my logic is that i want when i hover on the marker it opens a popup and when i hover out the popup it turn to closed but it didnt work and this is my code :

<Marker
            position={stream.coordinate}
            key={stream.id}
            eventHandlers={{
              mouseover: (e) => {
                e.target.openPopup();
              },
              mouseout: (e) => {
                setTimeout(() => {
                  e.target.closePopup();
                }, 1000);
              },
              click: (e) => {
                setDisplayRoute(true);
                setSelected(stream.id);
              },
            }}
          >
            <Popup 
              eventHandlers={{
                mouseover: (e) => {
                  e.target.openPopup();
                },
                mouseout: (e) => {
                    e.target.closePopup();
                },
              }}
            >
Abadlia Ramy
  • 105
  • 1
  • 7
  • Can you explain what "didn't work"? Is the popup always open or does the popup never show or something else? – teddybeard Oct 25 '21 at 23:19
  • the eventhandler in popup dosent work at all and i cant find why , i you have any suggestion to cmose the popup when i hoverout the popup not the marker please tell me – Abadlia Ramy Oct 26 '21 at 14:01
  • 1
    Seems to work: https://codesandbox.io/s/hungry-carlos-9cq1v – teddybeard Oct 26 '21 at 16:24
  • 1
    thanks bro but i want it to be displayed until i mouseout from the popup cause the is infos displayed there – Abadlia Ramy Oct 26 '21 at 19:59
  • 1
    Related, for anyone else fiddling with this kind of issue. https://stackoverflow.com/questions/20109336/leaflet-mouseout-called-on-mouseover-event?rq=1 – HammerN'Songs Jun 22 '22 at 19:35

1 Answers1

0

It's simple! All you gotta do is add the property "interactive" to your Popup (it also works with the Tooltip).

<Popup 
  eventHandlers={{
    mouseover: (e) => {
      e.target.openPopup();
    },
    mouseout: (e) => {
      e.target.closePopup();
    },
  }}
  interactive //Magic happens here
>

Hope it helps even though it's been almost 2 years haha

Felipe Castro
  • 1