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中的Overlay和Tooltip来实现。

当您从目标元素上移开时，叠加层/工具提示就会关闭，事情变得棘手。

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

下面的示例实现。

在鼠标悬停事件上打开工具提示。

单击工具提示中的关闭按钮即可关闭工具提示。

在工具提示以外的任何位置（包括目标）上单击均可关闭工具提示。

顺便说一句，我认为这不是一个好的解决方案，但可以抢先一步。

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元素所需的信息。 / p>

例如

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

在react-big-calendar中修改工具提示

2 个答案: