FullCalendar v5

With content injection hook e.g. for Material-ui tooltip:

eventContent: ( arg ) => {    return (        <Tooltip title={ <Typography color="inherit">Tooltip with HTML</Typography> } arrow>            { renderInnerContent( arg ) }        </Tooltip>    );}

If you want to have the exact same content as the default, then copy the function from fullcalendar source:

/** * https://github.com/fullcalendar/fullcalendar/blob/495d925436e533db2fd591e09a0c887adca77053/packages/common/src/common/StandardEvent.tsx#L79 */function renderInnerContent( innerProps ) {    return (        <div className='fc-event-main-frame'>            { innerProps.timeText &&            <div className='fc-event-time'>{ innerProps.timeText }</div>            }            <div className='fc-event-title-container'>                <div className='fc-event-title fc-sticky'>                    { innerProps.event.title || <Fragment> </Fragment> }                </div>            </div>        </div>    );}

To differentiate ListView content from default content you can use this code (given a Calendar reference calendarRef):

eventContent: ( arg ) => {    const data = calendarRef.current.getApi().getCurrentData();    const viewSpec = data.viewSpecs[arg.view.type];    let innerContent;    if (viewSpec.component === ListView) {        /**         * https://github.com/fullcalendar/fullcalendar/blob/495d925436e533db2fd591e09a0c887adca77053/packages/list/src/ListViewEventRow.tsx#L55         */        innerContent = renderListInnerContent( arg );    } else {        innerContent = renderInnerContent( arg );    }    return ( <Tooltip ... >{ innerContent }</Tooltip>);};

Tooltip using Tooltip.js

eventRender(info){    var tooltip = new Tooltip(info.el, {      title: info.event.extendedProps.description,      placement: 'top',      trigger: 'hover',      container: 'body'    });  }

In component :

render() {    return <FullCalendar                            events={this.state.getEvents}                    defaultView="resourceTimeGridDay"      plugins={[timeGrid, interactionPlugin, resourceDayGridPlugin]}          eventRender={this.eventRender}          schedulerLicenseKey="GPL-My-Project-Is-Open-Source"        />  }

OR

using react-tooltip

import ReactTooltip from 'react-tooltip'

and method to handle eventPosition

handleEventPositioned(info) {  info.el.setAttribute("data-tip","some text tip");   ReactTooltip.rebuild(); }

and  

render() {        return <FullCalendar                                events={this.state.getEvents}                        defaultView="resourceTimeGridDay"          plugins={[timeGrid, interactionPlugin, resourceDayGridPlugin]}              eventPositioned={this.handleEventPositioned}              schedulerLicenseKey="GPL-My-Project-Is-Open-Source"            />      }

Tooltip using tippy with eventMouseEnter

    handleMouseEnter = (arg) =>{    tippy(arg.el, {        content: "my tooltip!"    });}

in component

render() {    return (            <FullCalendar ref={this.calendarRef}                          plugins={[dayGridPlugin, interactionPlugin]}                          initialView="dayGridMonth"                          weekends={true}                          eventMouseEnter={this.handleMouseEnter}            />    )}