试图在 react-big-calendar 月视图中显示工具提示但行掩盖了它？

Question

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

目前，我正在尝试使用 slotPropGetter 道具更改单元格的样式以包含 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}
    )
    }

Answer 1

问题不在于单元格 z-index，而在于您的工具提示。你用什么来呈现你的工具提示？在引擎盖下，RBC 有 react-bootstrap@^0.32.4，它使用 react-overlay@^0.8.0。如果您使用 react-overlay 创建工具提示，您可以传送它们，它应该会自动处理您的 z-index 问题。

Answer 2

正确实现它的方法是使用 Reactstrap/Bootstrap Popover（基于 Popperjs）而不是普通的 CSS。它在这种情况下有效。

试图在 react-big-calendar 月视图中显示工具提示但行掩盖了它？

Trying to show tooltip in react-big-calendar month view but row covers it up?

css

reactjs

react-big-calendar