who knows how long i have not been pushing...

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

@@ -1,15 +1,12 @@
 import { IModuleItem } from "@/models/local/IModuleItem";
 import { getModuleItemUrl } from "@/services/urlUtils";
 import Link from "next/link";
-import { ReactNode, useEffect, useRef, useState } from "react";
+import { ReactNode, useRef, useState } from "react";
 import { useCourseContext } from "../../context/courseContext";
-import {
-  useDraggingContext,
-  DraggableItem,
-} from "../../context/drag/draggingContext";
-import { createPortal } from "react-dom";
+import { DraggableItem } from "../../context/drag/draggingContext";
 import ClientOnly from "@/components/ClientOnly";
 import { useDragStyleContext } from "../../context/drag/dragStyleContext";
+import { DayItemTooltip } from "./DayItemTooltip";
 
 export function ItemInDay({
   type,
@@ -53,8 +50,7 @@ export function ItemInDay({
             "draggableItem",
             JSON.stringify(draggableItem)
           );
-          setIsDragging(true)
-          
+          setIsDragging(true);
         }}
         onMouseEnter={() => setTooltipVisible(true)}
         onMouseLeave={() => setTooltipVisible(false)}
@@ -63,7 +59,7 @@ export function ItemInDay({
         {item.name}
       </Link>
       <ClientOnly>
-        <Tooltip
+        <DayItemTooltip
           message={message}
           targetRef={linkRef}
           visible={tooltipVisible && status === "incomplete"}
@@ -72,32 +68,3 @@ export function ItemInDay({
     </div>
   );
 }
-
-const Tooltip: React.FC<{
-  message: ReactNode;
-  targetRef: React.RefObject<HTMLElement>;
-  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
-  );
-};