Faculty name tooltip on hover

Author: chaitanya-codes

.husky/pre-commit

@@ -91,10 +91,16 @@ export default function CompoundTable({ data, large }: CompoundTableProps) {
                         {entry.slot.replace(/\+/g, '+\u200B')}
                       </div>
                       <div
-                        title={i === 0 ? displayName : undefined}
-                        className="w-[160px] shrink-0 break-words whitespace-normal text-right pr-4"
+                        onMouseEnter={e => {
+                          const r = e.currentTarget.getBoundingClientRect(), t = document.createElement('div');
+                          t.textContent = displayName;
+                          t.style = `position:fixed;top:${r.top - 24}px;left:${r.left}px;background:black;color:white;
+             font-size:12px;padding:2px 6px;border-radius:4px;z-index:9999;white-space:nowrap`;
+                          t.id = 'tip'; document.body.append(t);
+                        }}
+                        onMouseLeave={() => document.getElementById('tip')?.remove()}
                       >
-                        {i === 0 ? initials : ''}
+                        {initials}
                       </div>
                     </div>
                   ))}
@@ -106,4 +112,4 @@ export default function CompoundTable({ data, large }: CompoundTableProps) {
       </div>
     </div>
   );
-}
+}

package-lock.json

@@ -4,7 +4,7 @@ import React from 'react';
 
 export default function Loader() {
   return (
-    <div className="flex flex-col items-center justify-center h-screen bg-[#CEE4E5]">
+    <div className="flex flex-col items-center justify-center h-screen bg-[#CEE4E5] pointer-events-none">
       <div className="text-4xl mb-8 font-pangolin text-[#00000088]">Loading</div>
       <div
         className="w-16 h-16 animate-spin rounded-full"