fine tuning tooltip

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"}

src/components/Tooltip.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from "react";
 import { createPortal } from "react-dom";
 
-export const DayItemTooltip: React.FC<{
+export const Tooltip: React.FC<{
   message: ReactNode;
   targetRef: React.RefObject<HTMLAnchorElement | null>;
   visible: boolean;
@@ -16,10 +16,10 @@ export const DayItemTooltip: React.FC<{
       }}
       className={
         " absolute -translate-x-1/2 " +
-        " bg-gray-800 text-white text-sm " +
-        " rounded py-1 px-2 " +
+        " bg-gray-900 text-slate-200 text-sm " +
+        " rounded-md py-1 px-2 " +
         " transition-all duration-400 " +
-        " border border-slate-700 shadow-[0_0px_10px_0px] shadow-slate-500/50 " +
+        " border border-slate-700 shadow-[0px_0px_10px_5px] shadow-slate-500/20 " +
         (visible ? "  " : " hidden -z-50 ")
       }
       role="tooltip"