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>
`;
},
}