修改 react-big-calendar 中的 tooltip

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，你可以尝试使用 react-bootstrap 中的 Overlay and Tooltip 来实现这一点。

一旦您离开目标元素，事情就会变得棘手，因为 overlays/tooltips 关闭。

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

下面的示例实现..

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

Answer 2

如果您使用的是自定义事件组件，您只需在日历属性中设置 tooltipAccessor={null} 以禁用默认日历工具提示，并添加常规 HTML title 属性以及您在 [=22] 上所需的信息=] 自定义事件组件中的元素。

例如。

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

修改 react-big-calendar 中的 tooltip

Modifying the tooltip in react-big-calendar

javascript

reactjs

react-datepicker