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

【问题标题】：Modifying the tooltip in react-big-calendar修改 react-big-calendar 中的工具提示
【发布时间】：2019-10-29 10:17:22
【问题描述】：

如何修改将鼠标悬停在事件上时出现的工具提示？我想包含更多信息（开始日期、结束日期、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
    }}
  />

但这只会更改事件，而不是当您将鼠标悬停在事件上时出现的工具提示。是否可以修改工具提示？

【问题讨论】：

我对你的previous question的回答不是解决了吗？
@nithin Prevoius 问题是点击事件。这是悬停在事件上
好的。让我看看。
这可能对Demo有帮助

标签： javascript reactjs react-datepicker

【解决方案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 演示作为评论

【讨论】：

This 是 cmets 关于是否有人需要的问题的演示

【解决方案2】：

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

例如。

&lt;div title="Some text"&gt;Some text&lt;/div&gt;

【讨论】：