React fullcalendar与工具提示

Question

我试图添加一个工具提示悬停时悬停在完整的日历事件。警报工作，但没有显示工具提示。有什么建议可以让我继续吗?

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}
eventMouseEnter={
(arg) => {
<ReactTooltip id="registerTip" place="top" effect="solid">
{arg.event.title}
</ReactTooltip>
// alert(arg.event.title);
}
}
plugins={[dayGridPlugin]}
/>
</div>
);
}

示例(工作示例):https://codesandbox.io/s/0m03n?file=/src/App.js: 136 - 165

Answer 1

DR:为整个日历添加一个工具提示:

return (
<ReactTooltip id="registerTip" place="top" effect="solid">
<FullCalendar events={events} plugins={[dayGridPlugin]} />
<ReactTooltip />
);

若要仅在标题中添加工具提示，则必须使用自定义视图组件，其中使用工具提示包装视图:https://fullcalendar.io/docs/content-injection

---

对于任何要在屏幕上显示的组件，它必须呈现。在非常高的层次上，这通常意味着一个组件必须执行return (<ComponentToRender />)。

在您的示例中，您只是在将日历悬停时执行<ReactTooltip />的代码，实际上并没有呈现工具提示。注意，在onMouseEnter上返回<ReactTooltip />也不能工作。在这种情况下，您将在回调时返回它，而不是在组件本身。

为了您的理解，<ReactTooltip />可能有一些内部逻辑做一些事情(在非常伪代码级别)，如:

const [showTooltip, setShowTooltip] = useState();
onMouseEnter = setShowTooltip(true);
onMouseLeave = setShowTooltip(false);
...
return (
<>
{showTooltip && <Tooltip>}
{children}
</>