试图在 react-big-calendar 月视图中显示工具提示但行将其覆盖？答案

【问题标题】：Trying to show tooltip in react-big-calendar month view but row covers it up?试图在 react-big-calendar 月视图中显示工具提示但行将其覆盖？
【发布时间】：2020-08-20 13:20:41
【问题描述】：

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

目前，我正在尝试使用 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}
    )
    }

【问题讨论】：

标签： css reactjs react-big-calendar

【解决方案1】：

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

【讨论】：

感谢您的意见，它让我看到了超越普通 css 的洞察力。

【解决方案2】：

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

【讨论】：