Dynamic Permanent Property For Tooltip Leaflet

I'm trying to show a tooltip when a Legend component get hover. For that I have a Father component that has an useState hook in order to pass to the Leaflet Map component the index

Solution 1:

The reason why the change in permanent doesn't help is because underlying leaflet options are treated as immutable by react-leaflet. So even as your showLocationPosition might change (which changes permanent), the Tooltip was already created and will not respond to changes in that prop.

A quick and dirty way would be to use the key prop on the tooltip also, which can be a combination of the index and the permanent status:

<Tooltip {...otherProps} key={`${index}-${permanent}`}>

This would force a rerender of that Tooltip component when the value of permanent changes.

I would consider a different approach. If you don't need to also render the Tooltip when you mouseover the Marker it originates from, just conditionally render it based on permanent:

<Marker {...markerprops}>
  {permanent && <Tooltipdirection="..."offset={...}permanent={permanent}>
    {stuff}
  </Tooltip>}
</Marker>

You may want to change the name permanent to something else, like currentOpenTooltip. Now, if you also want to have the tooltip open and close properly when the user mouses over a marker, you'll need to add a condition for that. You can use a state variable to keep track of what Marker is being moused over, and use event handlers to control that state variable.

constFather = () => {

  const [currentlyMousedOverMarker, setCurrentlyMousedOverMarker] = useState(-1);

  return (
    <MapContainer>
      {markersData.map((marker, index) => {
        <Marker 
          {...markerprops}
          eventHandlers={{mouseenter: () => { setCurrentlyMousedOverMarker(index) },
            mouseleave: () => { setCurrentlyMousedOverMarker(-1) }
          }}
        >
          {permanent || currentlyMousedOverMarker === index && 
            (
              <Tooltippermanent={permanent || currentlyMousedOverMarker}>
                {stuff}
              </Tooltip>
            )
          }
        </Marker>
      })}
    </MapContainer>
  )

}

Obviously this code example is simplified and doesn't contain any of the logic you already had for permanent, but its just to give you an idea that the tooltip should only be rendered if either condition is true.