javascript - 修改react-big-calendar中的工具提示

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 组件，并且如果您使用 bootstrap，则可以尝试使用 Overlay 来实现此目的和 Tooltip来自react-bootstrap。

事情会变得棘手，因为一旦您离开目标元素，叠加层/工具提示就会关闭。

由于您的工具提示包含删除、编辑按钮，因此您需要一些逻辑来使工具提示停留在屏幕上并处理>何时关闭工具提示。

下面是示例实现..

Opens tooltip on mouseover event.

Closes tooltip on click of close button inside tooltip.

Closes tooltip on click anywhere outside tooltip (including the target).

顺便说一句，我不认为这是一个好的解决方案，但可以作为一个良好的开端。

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 演示作为评论