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类非常有用：css_class = 'tooltip-bold';，但在我要分配popupPane的下一行中却行不通。即使我在工具提示组件中分配了窗格，它们在实际应用程序中也没有改变。有什么方法可以基于悬停动态地使一个工具提示重叠在另一个工具提示上？

Answer 1

我找到了一个解决方案，我认为如果有人遇到此问题，我将在此处发布。我只需要将工具提示className设置为具有一定索引的类。这是基本思想（省去了一些不必要的东西）：

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

动态更改反应索引的z-index工具提示

1 个答案: