React FullCalendar事件悬停时Tooltip不显示问题求解

你在eventMouseEnter事件回调中直接返回ReactTooltip组件的写法不符合React的渲染逻辑：事件回调的返回值不会被挂载到React DOM树中，该Tooltip组件从未被真正渲染，因此无法正常显示。

你需要通过FullCalendar提供的eventDidMount回调给事件元素绑定Tooltip需要的属性，同时将ReactTooltip组件放在渲染函数的根节点下，具体实现代码如下：

import ReactTooltip from 'react-tooltip'
const events = [
  {
    title: "Event 1",
    start: "2021-10-04",
    end: "2021-10-06",
  },
  {
    title: "Event 2",
    start: "2021-10-04",
  }
];

export default function Calendar() {
  return (
    <div>
      <FullCalendar
        events={events}
        eventDidMount={(arg) => {
          // 给事件元素绑定tooltip需要的属性
          arg.el.setAttribute('data-tooltip-id', 'calendar-event-tip')
          arg.el.setAttribute('data-tooltip-content', arg.event.title)
        }}
        plugins={[dayGridPlugin]}
      />
      {/* 把Tooltip组件放在同级渲染位置，不要放在事件回调里 */}
      <ReactTooltip id="calendar-event-tip" place="top" effect="solid" />
    </div>
  );
}

• 如果你用的是react-tooltip v5及以上版本，组件命名改为Tooltip，对应的属性名和用法可以对应调整，核心逻辑不变
• 无需额外监听eventMouseEnter事件，Tooltip会自动根据绑定的元素触发显示/隐藏

内容的提问来源于stack exchange，提问作者BennKingy