为 react-leaflet 工具提示动态改变 z-index

Question

我的问题是 react-leaflet 工具提示重叠。将鼠标悬停在右侧的标记或相应列表上时，其上方的工具提示会变大。但是，我希望工具提示分层显示在其他工具提示之上。

我尝试在样式中更改样式 z-index，但这不起作用。我找到了更改工具提示窗格的建议，但这也不起作用。似乎更改窗格不会更新。

默认窗格参考：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>
        )
    }

我决定当前应激活哪个工具提示的方法是检查 this.props.selectedJob 是否等于当前 ID。这非常适合在这一行中分配 css class：css_class = 'tooltip-bold';，但不适用于我分配 popupPane 的下一行。即使我在 Tooltip 组件中分配窗格，它们在实际应用程序中也不会改变。有什么方法可以根据悬停动态地使一个工具提示覆盖另一个工具提示？

Answer 1

我找到了一个解决方案，我想我会 post 在这里以防其他人遇到这个问题。我只需要将工具提示 className 设置为具有特定索引的 class。这是基本思想（省略了一些不必要的东西）：

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;
}

为 react-leaflet 工具提示动态改变 z-index

Dynamically changing z-index for react-leaflet Tooltip

javascript

tooltip

leaflet

reactjs

react-leaflet