反应全日历与工具提示

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

TL.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}
 </>

反应全日历与工具提示

React fullcalendar with tooltip

fullcalendar

reactjs