Tooltip for polygon disappears when hovering over a marker placed on top of that polygon in Leaflet

Question

This seems like it should be a common enough problem but somehow I cannot find the solution anywhere.

I have a layer full of polygons (polygons representing districts of a city), and a layer full of markers (points of interest) that is rendered on top of those polygons.

Each marker has a popup associated with it, and each polygon has a tooltip associated with it. The polygon is also highlighted when the cursor is hovering over it. This works.

But when I hover over the marker, the tooltip of the polygon and the highlighted style disappear. How do I fix this? I want to be able to hover over the marker and still have the state highlighted. Hovering above the marker in a state should not mean that the cursor is outside of the state.

I don't want to render the markers below the polygon.

I tried playing with the bubblingMouseEvents option and interactive option but they dont have the desired effect.

I don't want to set pointerevents:none, because then I lose out on all interactivity with the marker. I want to be able to click on it.

Any suggestions?

This is how it is displayed:

1- Cursor is hovering above the state 2- Cursor is hovering above the city marker 3- Clicked on the city marker

Since I cannot paste the exact code here, this is a recreation of it with dummy values.

    const map = L.map("map", {
            center: [40.0238,-90.5757],
            minZoom: 1,
            maxZoom:14,
            zoom:2.5,
    });
    
    L.tileLayer.provider("Stamen.Watercolor").addTo(map);
    
    const statesLayer=L.geoJson.ajax("./states.geojson", {
        onEachFeature: (f, l) => {
            l.bindTooltip(f.properties["name"], { sticky: true });
            l.setStyle({
                color: "blue",
                    weight: 1.5,
                    fillColor: "blue",
                    fillOpacity:0.2
            });
            l.on("mouseover", () => {
             
                l.setStyle({
                    color: "blue",
                    fillColor: "green",
                    fillOpacity: 0.5
                });
            })
            l.on("mouseout", () => {
                l.setStyle({
                    color: "blue",
                    weight: 1.5,
                    fillColor: "blue",
                    fillOpacity:0.2
                })
            });
        
        }
    }).addTo(map);
    
    const citiesLayer=L.geoJson.ajax("./cities.geojson", {
        onEachFeature: (f, l) => {
            l.bindPopup(f.properties["NAME"]);
        }
    }).addTo(map);

Answer 1

Ok I found a way to do it.

The leaflet-pip plugin helps find all the polygons (in a layergroup) in which a given point resides.

I simply found the used this to find the polygon over which the point resides and highlight it