add time set hover to scores

src/app/layout.tsx

@@ -66,7 +66,7 @@ export default function RootLayout({
           <Toaster />
           <BackgroundImage />
           <PreloadResources />
-          <TooltipProvider>
+          <TooltipProvider delayDuration={100}>
             <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
               <QueryProvider>
                 <AnimatePresence>

src/components/score/score-info.tsx

@@ -1,5 +1,5 @@
-import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
 import BeatSaverMap from "@/common/database/types/beatsaver-map";
+import ScoreSaberLeaderboardToken from "@/common/model/token/scoresaber/score-saber-leaderboard-token";
 import { getDifficultyFromScoreSaberDifficulty } from "@/common/scoresaber-utils";
 import { songDifficultyToColor } from "@/common/song-utils";
 import FallbackLink from "@/components/fallback-link";
@@ -14,13 +14,9 @@ type Props = {
 };
 
 export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
-  const diff = getDifficultyFromScoreSaberDifficulty(
-    leaderboard.difficulty.difficulty,
-  );
+  const diff = getDifficultyFromScoreSaberDifficulty(leaderboard.difficulty.difficulty);
   const mappersProfile =
-    beatSaverMap != undefined
-      ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}`
-      : undefined;
+    beatSaverMap != undefined ? `https://beatsaver.com/profile/${beatSaverMap?.fullData.uploader.id}` : undefined;
 
   return (
     <div className="flex gap-3 items-center">
@@ -72,13 +68,7 @@ export default function ScoreSongInfo({ leaderboard, beatSaverMap }: Props) {
           </p>
           <p className="text-sm text-gray-400">{leaderboard.songAuthorName}</p>
           <FallbackLink href={mappersProfile}>
-            <p
-              className={clsx(
-                "text-sm",
-                mappersProfile &&
-                  "hover:brightness-75 transform-gpu transition-all",
-              )}
-            >
+            <p className={clsx("text-sm", mappersProfile && "hover:brightness-75 transform-gpu transition-all")}>
               {leaderboard.levelAuthorName}
             </p>
           </FallbackLink>

src/components/score/score-rank-info.tsx

@@ -1,7 +1,9 @@
 import ScoreSaberScoreToken from "@/common/model/token/scoresaber/score-saber-score-token";
 import { formatNumberWithCommas } from "@/common/number-utils";
 import { timeAgo } from "@/common/time-utils";
+import { format } from "@formkit/tempo";
 import { GlobeAmericasIcon } from "@heroicons/react/24/solid";
+import Tooltip from "../tooltip";
 
 type Props = {
   score: ScoreSaberScoreToken;
@@ -14,7 +16,18 @@ export default function ScoreRankInfo({ score }: Props) {
         <GlobeAmericasIcon className="w-5 h-5" />
         <p className="text-pp">#{formatNumberWithCommas(score.rank)}</p>
       </div>
-      <p className="text-sm">{timeAgo(new Date(score.timeSet))}</p>
+      <Tooltip
+        display={
+          <p>
+            {format({
+              date: new Date(score.timeSet),
+              format: "DD MMMM YYYY HH:mm a",
+            })}
+          </p>
+        }
+      >
+        <p className="text-sm cursor-default">{timeAgo(new Date(score.timeSet))}</p>
+      </Tooltip>
     </div>
   );
 }

src/components/tooltip.tsx

@@ -1,8 +1,4 @@
-import {
-  Tooltip as ShadCnTooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "./ui/tooltip";
+import { Tooltip as ShadCnTooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 type Props = {
   /**