Css 试图在大日历月视图中显示工具提示，但行将其覆盖？

当用户单击日历中的事件时，我试图显示一个基本的工具提示，其中包含一些事件详细信息，但工具提示将在下一行中显示

目前，我正在尝试使用

slotpregetter

prop来更改单元格的样式，以包括

z-index:-1

，并使用

z-index:1000

内联设置工具提示的样式，但没有用

以下是我当前的组件：

    export default() =>{
    const eventStyleGetter = ({ color }) => {
        const style = {
            backgroundColor: color,
            opacity: 0.8,
            zindex: "6",
            position:"relative",
        };
        return {
          style: style,
        };
      };
     const slotStyleGetter = () =>{
      const style = {
          position: "relative",
          zindex:0,
          height:"100px",
          
      }
      return{
          style: style
      }
  }
      const CalendarElement = (
        <Calendar
          localizer={localizer}
          defaultDate={new Date()}
          events={events}
          style={{ height: 500 }}
          eventPropGetter={(event) => eventStyleGetter(event)}
          slotPropGetter={(slot) => slotStyleGetter(slot)}
          onSelectSlot={(e) => handleSlotSelect(e)}
          selectable
          popup
          components={{
            event: EventPopover,
          }}
        />
      );
    
    return(
       {CalendarElement}
    )
    }

export default（）=>{
const eventStyleGetter=（{color}）=>{
常量样式={
背景颜色：颜色，
不透明度：0.8，
zindex：“6”，
职位：“相对”，
};
返回{
风格：风格，
};
};
常量slotStyleGetter=（）=>{
常量样式={
职位：“相对”，
zindex:0，
高度：“100px”，
}
返回{
风格：风格
}
}
常量日历元素=(
eventStyleGetter（事件）}
SlotSprogetter={（插槽）=>slotStyleGetter（插槽）}
onSelectSlot={（e）=>handleSlotSelect（e）}
可选的
弹出窗口
组成部分={{
事件：EventPopover，
}}
/>
);
返回(
{CalendarElement}
)
}

问题不是单元格z索引，而是工具提示的问题。您使用什么来呈现工具提示？在引擎盖下，RBC有react引导程序@^0.32.4，它使用react覆盖层@^0.8.0。如果使用react overlay创建工具提示，您可以将它们导入门户，这将自动处理z索引问题。

正确实现这一点的方法是使用react-Strap/Bootstrap Popover（基于PopperJ），而不是简单的CSS。在这种情况下，它起了作用。

感谢您的输入，它让我有了超越普通css的洞察力。