在react中修改工具提示-大日历

Question

如何修改当您悬停在事件上时出现的工具提示？我想包括更多的信息(开始日期，结束日期，id，按钮(编辑，删除)。我试过：

function Event({ event }) {
  return (
    <span>
      <strong>{event.title}</strong>
      {event.desc && ':  ' + event.desc}
    </span>
  )
}

 <Calendar
    events={events}
    localizer={localizer}
    defaultDate={new Date(2015, 3, 1)}
    components={{
      event: Event
    }}
  />

但这只会更改事件，而不会更改当您悬停在事件上时出现的工具提示。修改工具提示有可能吗？

Answer 1

事件工具提示在react-big-calendar 中是不可自定义的。

由于您有一个自定义的Event组件，如果您使用的是引导程序，您可以尝试使用来自react-bootstrap的覆盖和工具提示来实现这一点。

当您离开目标元素时，随着覆盖/工具提示的关闭，变得非常棘手。

由于您的工具提示包含delete、编辑按钮，您需要有一些逻辑才能使工具提示停留在屏幕上，并在关闭工具提示时处理。

下面是一个示例实现。

在mouseover事件上打开工具提示。 在工具提示中单击“关闭”按钮，关闭工具提示。 关闭工具提示，点击工具提示之外的任何地方(包括目标)。

顺便说一句，我不认为这是一个好的解决方案，但可能是一个先行者。

const IconStyle = {
  cursor: "pointer"
};

const TooltipContent = ({ onClose, event }) => {
  return (
    <React.Fragment>
      <FontAwesomeIcon
        icon={faWindowClose}
        className="pull-right"
        style={IconStyle}
        onClick={onClose}
      />
      <div>{event.title}</div>
      <div>Some other Info</div>
      <Row>
        <Button variant="light">Button 1</Button>
        <Button variant="light">Button 2</Button>
      </Row>
    </React.Fragment>
  );
};

function Event(event) {
  const [showTooltip, setShowTooltip] = useState(false);

  const closeTooltip = () => {
    setShowTooltip(false);
  };

  const openTooltip = () => {
    setShowTooltip(true);
  };
  const ref = useRef(null);

  const getTarget = () => {
    return ReactDOM.findDOMNode(ref.current);
  };

  return (
    <div ref={ref}>
      <span onMouseOver={openTooltip}>{event.title}</span>
      <Overlay
        rootClose
        target={getTarget}
        show={showTooltip}
        placement="top"
        onHide={closeTooltip}
      >
        <Tooltip id="test">
          <TooltipContent event={event} onClose={closeTooltip} />
        </Tooltip>
      </Overlay>
    </div>
  );
}

我添加了一个stackblitz演示作为注释。

Answer 2

如果使用自定义事件组件，则只需在日历道具中设置tooltipAccessor={null}以禁用默认日历工具提示，并使用自定义事件组件中的HTML元素添加常规HTML属性。

就像。

​

<div title="Some text">Some text</div>

​