React fullcalendar with tooltip-CodePudding

I am trying to add a tooltip on hover when hovering over the event in fullcalendar. The alert works but the tooltip doesen't appear. Any tips to get me going?

   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>
      );
    }

Example (Working example): https://codesandbox.io/s/0m03n?file=/src/App.js:136-165

CodePudding user response：

TL.DR: To add a tooltip to the whole calendar:

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

);

To add a tooltip only to the title, you must use custom views components where your wrap the view with the tooltip: https://fullcalendar.io/docs/content-injection

For any component to show on the screen, it has to be rendered. On a very high level, that generally means that one component has to do return (<ComponentToRender />).

In your example, you are simply executing the code for the <ReactTooltip /> when hovering the calendar, not actually rendering the tooltip. Pay attention that returning the <ReactTooltip /> on the onMouseEnter wouldn't work either. In that case you would be returning it on the callback, not on the component itself.

For your understanding, the <ReactTooltip /> probably has some internal logic that does something (on a very pseudo code level) like:

const [showTooltip, setShowTooltip] = useState();
onMouseEnter = setShowTooltip(true);
onMouseLeave = setShowTooltip(false);

...

return (
  <>
   {showTooltip && <Tooltip>}
   {children}
 </>