Modify tooltip on show more text in react-big-calendar

Question

I am using react-big-calendar to show events in only Month view. Now when the number of events grow in a single day and the '+{total} more' text starts to appear, I want to show a tooltip with all events of that day in the calendar.

I am only using a Month view and more text appears like:

Now I want to show all these event information in a tooltip when user hovers over, I tried and disabled the default behaviour of this text as it acts as a link:

<Calendar
                localizer={localizer}
                showAllEvents={false}
                defaultView={Views.MONTH}
                events={myEvents}
                style={calendarHeight}
                eventPropGetter={myStyle}
                onNavigate={handleCalendarNavigate}
                messages={{
                    showMore: total => (
                      <Box style={{cursor: 'auto'}}
                           onMouseOver={e => {
                               console.log(`onMouseOver`);
                           }}
                           onClick={e => {
                               e.stopPropagation();
                               e.preventDefault();
                           }}>{`+${total} more`}
                      </Box>
                    )
                }}
                views={['month']}/>

I am getting a callback in the onMouseOver function but do I identify which date is being hovered over to show that information?

Answer 1

The '+X more` button follows the following chain of logic.

• If popup is 'true' (it's defaulted to 'false') then it shows the popup.
• If doShowMoreDrillDown (undocumented prop) is 'true' then it drills down to the next view. You can provide your own getDrilldownView to override the default drilldown.
• If onShowMore is defined, it will run (in any event)

The messages.showMore prop was recently updated to provide some additional information

/**
 * params {total} count of remaining events 
 * params {remainingEvents} remaining events 
 * params {events} all events in day
 */
showMore: (total, remainingEvents, events) => `+${total} más`,

How you change that is up to you, but you must realize that this is still in a button with a preset onClick handler that runs the above logic.