Our powerful JS Calendar component


Post by neha »

Hi,

I'm experiencing an issue with empty tooltips appearing when hovering over events in the all-day header section of my calendar component.

In my calendar configuration, I've already implemented logic to prevent tooltips from showing for all-day events in the week view:

Despite the condition if (isMonthView || (isWeekView && isAllDay)) { return null; }, I'm still seeing empty tooltip boxes appearing when hovering over all-day events. As shown in the attached screenshot, the tooltips appear empty but are still visible, which creates a confusing user experience.

Could you please advise on:

How to completely prevent tooltips from appearing for all-day header events?
Is there a configuration setting I'm missing that would completely disable the tooltip rendering (not just returning null content)?
I appreciate any guidance you can provide to help resolve this issue.
Thank you

eventTooltipFeature: {
    showOn: "hover",
    tooltip: {
        header: false,
    },
    renderer: ({ eventRecord }) => {
        const calendar = calendarRef.current?.instance as unknown as CalendarInstance;
        const currentView = calendar?.activeView?.type;
        const isAllDay = eventRecord.get("allDay");

        const isMonthView = currentView === "monthview";
        const isWeekView = currentView === "weekview";
        // Don't show tooltips for all-day events in any view
        if (isMonthView || (isWeekView && isAllDay)) {
            return null; 
        }

        const start = new Date(eventRecord.startDate);
        const end = new Date(eventRecord.endDate);

        const formatTime = (date: Date) =>
            date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });

        return `
              <div>
                  <strong>${eventRecord.name}</strong><br/>
                  ${formatTime(start)} – ${formatTime(end)}
              </div>
          `;
    },
}
Attachments
EmptyTooltip.png
EmptyTooltip.png (88.65 KiB) Viewed 367 times

Post by Animal »

Returning null from the renderer does not hide the tooltip. Perhaps it should.

But the correct way would be to veto the beforeShow event:

        eventTooltip : {
            showOn: "hover",
            listeners : {
                beforeShow : function() {
                    // Veto show tooltips for all-day events in any view
                    if (this.eventRecord.allDay) {
                        return false; 
                    }
                }
            }
        }

Post by Animal »

Returning null does prevent show, so must be just a bug in the renderer not returning null when you think it is, and that code just needed to be stepped to check its function.


Post by neha »

Thank you for the clarification! Adding the beforeShow listener with the return false condition worked perfectly to suppress tooltips for all-day events. Appreciate your support.


Post Reply