fine tuning tooltip

src/app/course/[courseName]/calendar/day/DayItemTooltip.tsx

@@ -1,31 +0,0 @@
-import { ReactNode } from "react";
-import { createPortal } from "react-dom";
-
-export const DayItemTooltip: React.FC<{
-  message: ReactNode;
-  targetRef: React.RefObject<HTMLAnchorElement | null>;
-  visible: boolean;
-}> = ({ message, targetRef, visible }) => {
-  const rect = targetRef.current?.getBoundingClientRect();
-
-  return createPortal(
-    <div
-      style={{
-        top: (rect?.bottom ?? 0) + window.scrollY + 10,
-        left: (rect?.left ?? 0) + window.scrollX + (rect?.width ?? 0) / 2,
-      }}
-      className={
-        " absolute -translate-x-1/2 " +
-        " bg-gray-800 text-white text-sm " +
-        " rounded py-1 px-2 " +
-        " transition-all duration-400 " +
-        " border border-slate-700 shadow-[0_0px_10px_0px] shadow-slate-500/50 " +
-        (visible ? "  " : " hidden -z-50 ")
-      }
-      role="tooltip"
-    >
-      {message}
-    </div>,
-    document.body
-  );
-};

src/app/course/[courseName]/calendar/day/DayTitle.tsx

@@ -7,6 +7,9 @@ import { DraggableItem } from "../../context/drag/draggingContext";
 import { useDragStyleContext } from "../../context/drag/dragStyleContext";
 import { getLectureForDay } from "@/models/local/utils/lectureUtils";
 import { useLecturesSuspenseQuery } from "@/hooks/localCourse/lectureHooks";
+import ClientOnly from "@/components/ClientOnly";
+import { Tooltip } from "@/components/Tooltip";
+import { useRef, useState } from "react";
 
 export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
   const { courseName } = useCourseContext();
@@ -14,6 +17,8 @@ export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
   const { setIsDragging } = useDragStyleContext();
   const todaysLecture = getLectureForDay(weeks, dayAsDate);
   const modal = useModal();
+  const linkRef = useRef<HTMLAnchorElement>(null);
+  const [tooltipVisible, setTooltipVisible] = useState(false);
 
   const lectureName = todaysLecture && (todaysLecture.name || "lecture");
 
@@ -38,9 +43,21 @@ export function DayTitle({ day, dayAsDate }: { day: string; dayAsDate: Date }) {
             setIsDragging(true);
           }
         }}
+        ref={linkRef}
+        onMouseEnter={() => setTooltipVisible(true)}
+        onMouseLeave={() => setTooltipVisible(false)}
       >
         {dayAsDate.getDate()} {lectureName}
       </Link>
+      <ClientOnly>
+        {(lectureName?.length ?? 0) > 0 && (
+          <Tooltip
+            message={lectureName}
+            targetRef={linkRef}
+            visible={tooltipVisible}
+          />
+        )}
+      </ClientOnly>
       <Modal
         modalControl={modal}
         buttonText="+"

src/app/course/[courseName]/calendar/day/ItemInDay.tsx

@@ -6,7 +6,7 @@ import { useCourseContext } from "../../context/courseContext";
 import { DraggableItem } from "../../context/drag/draggingContext";
 import ClientOnly from "@/components/ClientOnly";
 import { useDragStyleContext } from "../../context/drag/dragStyleContext";
-import { DayItemTooltip } from "./DayItemTooltip";
+import { Tooltip } from "../../../../../components/Tooltip";
 
 export function ItemInDay({
   type,
@@ -59,7 +59,7 @@ export function ItemInDay({
         {item.name}
       </Link>
       <ClientOnly>
-        <DayItemTooltip
+        <Tooltip
           message={message}
           targetRef={linkRef}
           visible={tooltipVisible && status === "incomplete"}