How to add Tooltip to fullcalender.js using react-tooltip

In this article, we will see how to add a tooltip to Fullcalendar

First, install the react tooltip using the below command

npm i react-tooltip

then import the tooltip on the file

import { Tooltip } from 'react-tooltip';

call the Tooltip component within this select attribute of anchorSelect, that on which element you need to show the tooltip when mouse hovers and in the tag define the tooltip content as shown below

const tooltipContent = `
    <div style="position:relative; z-index:99999;">
      <strong>${eventContent.event.title}</strong>
    </div>
    <div>
      <em>${eventContent.event.extendedProps.description}</em>
    </div>
    ${eventContent.event.extendedProps.time ? `<div>
      <span>Time: ${eventContent.event.extendedProps.time}</span>
    </div>` : ''}
    ${eventType === 'leave' ? `<div>
      <span>Days: ${eventContent.event.end ? 
        Math.ceil((eventContent.event.end.getTime() - eventContent.event.start!.getTime()) / (1000 * 60 * 60 * 24)) 
        : 1}</span>
    </div>` : ''}
  `;
<Tooltip anchorSelect='.calendar-text' style={{borderRadius:"1rem"}}><div dangerouslySetInnerHTML={{__html:tooltipContent }}></div></Tooltip>