add event title as a tooltip

packages/features/calendars/weeklyview/components/event/Event.tsx

@@ -1,6 +1,8 @@
 import { cva } from "class-variance-authority";
 
 import dayjs from "@calcom/dayjs";
+import classNames from "@calcom/lib/classNames";
+import { Tooltip } from "@calcom/ui";
 
 import type { CalendarEvent } from "../../types/events";
 
@@ -62,23 +64,28 @@ export function Event({
   const Component = onEventClick ? "button" : "div";
 
   return (
-    <Component
-      onClick={() => onEventClick?.(event)} // Note this is not the button event. It is the calendar event.
-      className={eventClasses({
-        status: options?.status,
-        disabled,
-        selected,
-        borderColor,
-      })}
-      style={styles}>
-      <div className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-left leading-4">
-        {event.title}
-      </div>
-      {eventDuration > 30 && (
-        <p className="text-subtle text-left text-[10px] leading-none">
-          {dayjs(event.start).format("HH:mm")} - {dayjs(event.end).format("HH:mm")}
-        </p>
-      )}
-    </Component>
+    <Tooltip content={event.title}>
+      <Component
+        onClick={() => onEventClick?.(event)} // Note this is not the button event. It is the calendar event.
+        className={classNames(
+          eventClasses({
+            status: options?.status,
+            disabled,
+            selected,
+            borderColor,
+          }),
+          options?.className
+        )}
+        style={styles}>
+        <div className="w-full overflow-hidden overflow-ellipsis whitespace-nowrap text-left leading-4">
+          {event.title}
+        </div>
+        {eventDuration > 30 && (
+          <p className="text-subtle text-left text-[10px] leading-none">
+            {dayjs(event.start).format("HH:mm")} - {dayjs(event.end).format("HH:mm")}
+          </p>
+        )}
+      </Component>
+    </Tooltip>
   );
 }

packages/features/calendars/weeklyview/types/events.ts

@@ -10,5 +10,6 @@ export interface CalendarEvent {
     status?: BookingStatus;
     allDay?: boolean;
     borderColor?: string;
+    className?: string;
   };
 }