Dynamically changing z-index for react-leaflet Tooltip

Question

My issue is react-leaflet tooltips overlapping. When hovering over either a marker or the corresponding list on the right-hand side, the tooltip above it increases in size. However, I want the tooltip to appear layered above other tooltips.

I tried changing the style z-index in styling, but that doesn't work. I found a suggestion to change the Tooltip pane instead, but that didn't work either. It seems like changing the pane doesn't update.

Default pane reference: https://leafletjs.com/reference-1.5.0.html#map-pane

render() {
        var job = this.props.job;
        var icon_to_use = pointerIcon;
        var css_class = 'tooltip-normal';
        var paneToUse = 'tooltipPane';
        if (this.props.selectedJob === this.props.id) {
            css_class = 'tooltip-bold';
            paneToUse = 'popupPane';
        }

        return (
            <div>
                <Marker position={[job.lat, job.lng]} pane={'markerPane'} icon={icon_to_use}>
                    <Tooltip permanent={true} pane={paneToUse} direction {'top'} offset={L.point(-10, -15)}>
                        <div className={css_class}>
                            {job.location}
                        </div>
                    </Tooltip>
                </Marker>
            </div>
        )
    }

The way I'm deciding which Tooltip should currently be active is by checking if this.props.selectedJob equals the current id. This works perfectly fine for assigning the css class in this line: css_class = 'tooltip-bold';, but not for the next line where I'm assigning the popupPane. Even though I'm assigning the pane in the Tooltip component, they don't change in the actual application. Is there any way to dynamically make one tooltip overlay another based on hovering?

If you could set a JSFiddle or similar would be nice to actually test this. This might be a stupid suggestion but if you are able to set the z-index and it doesnt change it could be that the element has no position? — Alvaro

John Paul Depew John Paul Depew · Accepted Answer · 2019-08-14T20:40:17

I found a solution, and I figure I'll post it here in case someone else comes across this. I simply had to set the tooltip className to a class with a certain index. Here's the basic idea (leaving out some unnecessary stuff):

if(condition){
    tooltipCssClass = 'front-tooltip-class';
}

return (
    <Tooltip permanent={true} className={tooltipCssClass} direction={'top'} offset={L.point(-10, -15)}>
    ...
    </Tooltip>
)

CSS:

.back-tooltip-class {
  z-index: -100;
}

.front-tooltip-class {
  z-index: 100;
}

Dynamically changing z-index for react-leaflet Tooltip

1 Answers