From 44b8dd308a27ce03160ada360fcd620162bfa4e2 Mon Sep 17 00:00:00 2001
From: Tilen Komel <me@komelt.dev>
Date: Mon, 3 Feb 2025 21:23:08 +0100
Subject: [PATCH] Update tooltip

---
 src/components/generic/TimeAgo.tsx | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/generic/TimeAgo.tsx b/src/components/generic/TimeAgo.tsx
index 6148b3be..85043c58 100755
--- a/src/components/generic/TimeAgo.tsx
+++ b/src/components/generic/TimeAgo.tsx
@@ -1,3 +1,10 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@radix-ui/react-tooltip";
 import type { JSX } from "react";
 
 export interface TimeAgoProps {
@@ -38,8 +45,22 @@ const getTimeAgo = (
 
 export const TimeAgo = ({ timestamp }: TimeAgoProps): JSX.Element => {
   return (
-    <span title={new Date(timestamp).toLocaleString()}>
-      {getTimeAgo(timestamp)}
-    </span>
+    <TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger>
+          <span>{getTimeAgo(timestamp)}</span>
+        </TooltipTrigger>
+        <TooltipPortal>
+          <TooltipContent
+            className="rounded-md bg-slate-800 px-3 py-1.5 text-sm text-white shadow-md animate-in fade-in-0 zoom-in-95"
+            side="top"
+            align="center"
+            sideOffset={5}
+          >
+            {new Date(timestamp).toLocaleString()}
+          </TooltipContent>
+        </TooltipPortal>
+      </Tooltip>
+    </TooltipProvider>
   );
 };