尝试在react-big-calendar月视图中显示工具提示，但行将其遮盖了吗？

问题描述

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

当前，我正在尝试使用slotPropGetter道具来更改单元格的样式以包含z-index: -1并使用z-index: 1000对工具提示进行内联样式化，但没有用。 / p>

这是我当前的组件：

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

解决方法

问题不是单元格z-index，而是工具提示中的问题。您正在使用什么来呈现工​​具提示？在底层，RBC具有react-bootstrap@^0.32.4，它使用react-overlay@^0.8.0。如果您使用react-overlay来创建工具提示，则可以对其进行门户操作，这将自动处理您的z-index问题。

,

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